Nuxt的動態(tài)路由和參數(shù)校驗操作
其實動態(tài)路由就是帶參數(shù)的路由。比如我們現(xiàn)在新聞模塊下面有很多新聞詳情頁，這時候就需要動態(tài)路由的幫助了。
新聞詳細頁面
我們在news文件夾下面新建了_id.vue的文件，以下劃線為前綴的Vue文件就是動態(tài)路由，然后在文件里邊有$route.params.id來接收參數(shù)。
/pages/news/_id.vue
<template>
<div>
<h2>News-Content{{$route.params.id}}</h2>
<ul>
<li><a href="/" rel="external nofollow" rel="external nofollow" >Home</a></li>
</ul>
</div>
</template>
修改新聞首頁路由
我們在/pages/news/index.vue進行修改，增加兩個詳細頁的路由News-1和News-2.
<template>
<div>
<h2>News Index page</h2>
<p>NewID:{{$route.params.newsId}}</p>
<ul>
<li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
<li><a href="/news/123" rel="external nofollow" rel="external nofollow" >News-1</a></li>
<li><a href="/news/456" rel="external nofollow" >News-2</a></li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
動態(tài)參數(shù)校驗
進入一個頁面，對參數(shù)傳遞的正確性校驗是必須的，Nuxt.js也貼心的為我們準備了校驗方法validate()。 /pages/news/_id.vue
<template>
<div>
<h2>News-Content{{$route.params.id}}</h2>
<ul>
<li><a href="/" rel="external nofollow" rel="external nofollow" >Home</a></li>
</ul>
</div>
</template>
<script>
export default {
validate({params}){
// Must be a number
return /^\d+$/.test(params.id)
}
}
</script>
/pages/news/index.vue
<template>
<div>
<h2>News Index page</h2>
<p>NewID:{{$route.params.newsId}}</p>
<ul>
<li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
<li><a href="/news/123" rel="external nofollow" rel="external nofollow" >News-1</a></li>
<li><a href="/news/a" rel="external nofollow" >News-2</a></li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
我們使用了validate方法，并把params傳遞進去，然后用正則進行了校驗，如果正則返回了true正常進入頁面，如果返回false進入404頁面。
補充知識：Nuxt 實現(xiàn)用戶鑒權登陸
引言
博客前臺重構完畢了，接下來就是后臺部分了，后臺的主要功能就是發(fā)布、刪除、修改文章，自然不是誰都能隨便進的。在 vue 項目中，我是在 Vue Router 的全局前置守衛(wèi)里判斷當前用戶是否有 cookie 從而判斷是否有權進入后臺。而 Nuxt 相比 Vue 項目最大的不同之一就是沒有使用 Vue Router 而是使用 目錄來進行頁面路由，自然我們就失去了 全局前置守衛(wèi)這個利器，當然 Nuxt 是有解決辦的，不過在那之前我們需要先來了解一下鑒權的原理。
Cookie 和 Session
相信前端的同學們對這兩個名字早就有所耳聞，卻不一定有詳細的了解。眾所周知，我們?yōu)g覽網(wǎng)頁使用的 HTTP 協(xié)議是無狀態(tài)的的，也就是說你每一次請求對于服務器來說都是一樣的，它沒有辦法記住這個請求是你發(fā)的。所以這里就要用到Cookie。
Cookie 是服務端設置的，由瀏覽器儲存在你的硬盤中的一組數(shù)據(jù)，，比如你的用戶 數(shù)據(jù)，每次向服務器發(fā)送請求就會攜帶上這個數(shù)據(jù)。服務器查看就能知道這是誰發(fā)過來的。這一過程就稱為Session（會話）
Session 初始是指一種概念，是你和網(wǎng)站發(fā)生交互的一個周期。在這個周期中服務器就是通過儲存在瀏覽器的 Cookie 來判別你是誰。但是因為儲存在本地的Cookie并不安全，誰都可以看到并更改，所以現(xiàn)在更為流行的做法是僅僅通過 Cookie 保存 的唯一的用戶標識符（SessionID）來識別用戶，而用戶信息儲存在服務器端。所以 Session 這個概念可以說是 Cookie 的上級也可以說是其同級
Nuxt 鑒權
講解了 Nuxt 鑒權的基本原理，我們可以知道鑒權就是在在用戶進入這個頁面的時候?qū)Ρ镜氐?Cookie 進行判斷，存在設置好的 Cookie 那么說明這個用戶已經(jīng)登陸過了，放他過去。啥也沒有？ 不行你去給我登陸，就跳轉(zhuǎn)到登錄頁面。明白了這個流程就開始具體的工作了。
服務器端
在服務器端我們使用 koa-session 安裝 koa-session
npm install koa-session
npm install koa-session-mongoose //使用 mongodb 儲存 Session 信息
然后在入口文件中這樣使用
app.use(
session(
{
key: "***", //加密密鑰
overwrite: true, //覆寫Cookie
httpOnly: true, //經(jīng)允許通過 JS 來更改
renew: true,
store: new MongooseStore({
createIndexes: "appSessions",
connection: mongoose,
expires: 86400, // 1 day is the default
name: "AppSession"
}) //傳入一個用于session的外部儲存，我這里是使用了 mongodb
},
app
)
);
因為 koa 默認會把 Session 打到 ctx.session 中,不方便用戶端獲取，所以我們把它移一下位，挪到 ctx.req.session 中
app.use((ctx) => {
ctx.status = 200
ctx.respond = false // Bypass Koa's built-in response handling
ctx.req.session = ctx.session
ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
return new Promise((resolve, reject) => {
ctx.res.on('close', resolve)
ctx.res.on('finish', resolve)
nuxt.render(ctx.req, ctx.res, promise => {
// nuxt.render passes a rejected promise into callback on error.
promise.then(resolve).catch(reject)
})
})
})
這是登陸函數(shù)，查詢數(shù)據(jù)庫是否又對應的用戶名和密碼，存在的話，給客戶端設置一個 Cookie 返回登錄成功
static async login(ctx) {
let { passwd, email } = ctx.request.body;
let hasuser = await UserModel.findOne({ email: email, passwd: md(passwd) });
if (!hasuser) {
return ctx.error({});
}
else {
let userid = hasuser._id;
const { session } = ctx;
session.userid = userid;
return ctx.success({ data: { userid: userid } });
}
}
服務端設置完成了
客戶端（Nuxt）
其實以上的步驟和 Vue 項目中一模一樣，Nuxt 中主要的不同就是失去了全局前置守衛(wèi)，那么要在哪里判斷是否存在 Cookie 呢，別急，Nuxt 官方自然是給了解決方案，先看一下 Nuxt 的生命周期
image
這里我們用到的就是紅框中的 nuxtServerInit 和 middleware 這兩個時期，先來看代碼
// store/index.js Vuex 文件中
export const actions = {
// nuxtServerInit is called by Nuxt.js before server-rendering every page
nuxtServerInit({ commit }, { req }) {
if (req.session && req.session.userid) {
console.log("用戶已經(jīng)登錄");
commit("SET_USER", req.session.userid);
}
},
export const mutations = {
SET_USER(state, user) {
state.authUser = user;
},
}
Store action 模塊中的 nuxtServerInit 函數(shù)是整個生命周期 最先運行的，我們就在這里判斷當前用戶瀏覽器中是否有 Cookie ，如果有的話就在 state 中用一個字段保存下來。是不是還挺像全局前置守衛(wèi)。這里還只是做了判斷，打上了印記你登沒登陸，攔截在哪里呢，別急，就是下一個流程 middleware 中。
打開 middleware 文件夾( Nuxt 項目自帶)，新建 auth.js 文件
// auth.js
export default function ({ store, redirect }) {
if (!store.state.authUser) {
return redirect('/welcome')
}
}
瞧一下 Vuex 中看看你有沒有登陸，沒有的話把你送到登陸頁面去，簡單直接吧，只要在需要鑒權的頁面引用這個中間件即可，對于此項目只要在后臺管理頁面引用就好
export default {
middleware: 'auth',
};
總結(jié)
就這樣完成了鑒權的操作，沒有登陸過的用戶在訪問后臺是時候會被重定向到登陸頁面去，就是很簡單的使用了一下 Cookie ，限于項目性質(zhì)，session 的很多功能并沒有用到，比如在服務器端儲存用戶信息。主要是它的功能也就是防止別人訪問后臺，非常簡單。
以上這篇Nuxt的動態(tài)路由和參數(shù)校驗操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue3 使用axios攔截器打印前端日志，這是一種比較值得推薦的方式，也就是寫一次，就不用總寫console.log了。下面來看看文章的詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
vue 自定義提示框(Toast)組件的實現(xiàn)代碼
這篇文章主要介紹了vue 自定義提示框(Toast)組件的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue2中基于vue-simple-upload實現(xiàn)文件分片上傳組件功能
這篇文章主要介紹了vue2中基于vue-simple-upload的文件分片上傳組件,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
element-ui自定義message-box自定義樣式不生效的解決
這篇文章主要介紹了element-ui自定義message-box自定義樣式不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了vue修改vue項目運行端口號的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了使用vue自定義如何實現(xiàn)Tree組件和拖拽功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
解決vue里a標簽值解析變量,跳轉(zhuǎn)頁面,前面加默認域名端口的問題
這篇文章主要介紹了解決vue里a標簽值解析變量,跳轉(zhuǎn)頁面,前面加默認域名端口的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章給大家介紹了vue3如何實現(xiàn)頁面跳轉(zhuǎn),文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue 項目代碼拆分的方案，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
下面小編就為大家分享一篇webpack配置導致字體圖標無法顯示的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03