Nuxt的動態(tài)路由和參數校驗操作
其實動態(tài)路由就是帶參數的路由。比如我們現在新聞模塊下面有很多新聞詳情頁，這時候就需要動態(tài)路由的幫助了。
新聞詳細頁面
我們在news文件夾下面新建了_id.vue的文件，以下劃線為前綴的Vue文件就是動態(tài)路由，然后在文件里邊有$route.params.id來接收參數。
/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)參數校驗
進入一個頁面，對參數傳遞的正確性校驗是必須的，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 實現用戶鑒權登陸
引言
博客前臺重構完畢了，接下來就是后臺部分了，后臺的主要功能就是發(fā)布、刪除、修改文章，自然不是誰都能隨便進的。在 vue 項目中，我是在 Vue Router 的全局前置守衛(wèi)里判斷當前用戶是否有 cookie 從而判斷是否有權進入后臺。而 Nuxt 相比 Vue 項目最大的不同之一就是沒有使用 Vue Router 而是使用 目錄來進行頁面路由，自然我們就失去了 全局前置守衛(wèi)這個利器，當然 Nuxt 是有解決辦的，不過在那之前我們需要先來了解一下鑒權的原理。
Cookie 和 Session
相信前端的同學們對這兩個名字早就有所耳聞，卻不一定有詳細的了解。眾所周知，我們?yōu)g覽網頁使用的 HTTP 協(xié)議是無狀態(tài)的的，也就是說你每一次請求對于服務器來說都是一樣的，它沒有辦法記住這個請求是你發(fā)的。所以這里就要用到Cookie。
Cookie 是服務端設置的，由瀏覽器儲存在你的硬盤中的一組數據，，比如你的用戶 數據，每次向服務器發(fā)送請求就會攜帶上這個數據。服務器查看就能知道這是誰發(fā)過來的。這一過程就稱為Session（會話）
Session 初始是指一種概念，是你和網站發(fā)生交互的一個周期。在這個周期中服務器就是通過儲存在瀏覽器的 Cookie 來判別你是誰。但是因為儲存在本地的Cookie并不安全，誰都可以看到并更改，所以現在更為流行的做法是僅僅通過 Cookie 保存 的唯一的用戶標識符（SessionID）來識別用戶，而用戶信息儲存在服務器端。所以 Session 這個概念可以說是 Cookie 的上級也可以說是其同級
Nuxt 鑒權
講解了 Nuxt 鑒權的基本原理，我們可以知道鑒權就是在在用戶進入這個頁面的時候對本地的 Cookie 進行判斷，存在設置好的 Cookie 那么說明這個用戶已經登陸過了，放他過去。啥也沒有？ 不行你去給我登陸，就跳轉到登錄頁面。明白了這個流程就開始具體的工作了。
服務器端
在服務器端我們使用 koa-session 安裝 koa-session
npm install koa-session
npm install koa-session-mongoose //使用 mongodb 儲存 Session 信息
然后在入口文件中這樣使用
app.use(
session(
{
key: "***", //加密密鑰
overwrite: true, //覆寫Cookie
httpOnly: true, //經允許通過 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)
})
})
})
這是登陸函數，查詢數據庫是否又對應的用戶名和密碼，存在的話，給客戶端設置一個 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("用戶已經登錄");
commit("SET_USER", req.session.userid);
}
},
export const mutations = {
SET_USER(state, user) {
state.authUser = user;
},
}
Store action 模塊中的 nuxtServerInit 函數是整個生命周期 最先運行的，我們就在這里判斷當前用戶瀏覽器中是否有 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',
};
總結
就這樣完成了鑒權的操作，沒有登陸過的用戶在訪問后臺是時候會被重定向到登陸頁面去，就是很簡單的使用了一下 Cookie ，限于項目性質，session 的很多功能并沒有用到，比如在服務器端儲存用戶信息。主要是它的功能也就是防止別人訪問后臺，非常簡單。
以上這篇Nuxt的動態(tài)路由和參數校驗操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
通過vue-router懶加載解決首次加載時資源過多導致的速度緩慢問題
這篇文章主要介紹了vue-router懶加載解決首次加載時資源過多導致的速度緩慢問題,文中單獨給大家介紹了vue router路由懶加載問題，需要的朋友可以參考下2018-04-04
Vue3和Vue2基本差不多，只不過需要將createRouter、createWebHistory從vue-router中引入，再進行使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-09-09
在前端的崗位上經常需要實現個生成個并下載的可視化圖表頁PDF文件,這篇文章主要給大家介紹了關于Vue前端如何實現生成PDF并下載功能的相關資料,需要的朋友可以參考下2021-10-10
Vue中使用touchstart、touchmove、touchend與click沖突問題
這篇文章主要介紹了Vue中使用touchstart、touchmove、touchend與click沖突問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了五分鐘搞懂Vuex實用知識，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了Vue.js遞歸組件實現組織架構樹和選人功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了vue語法之render函數和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡單介紹一下jsx的基本使用，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue-editor-bridge報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在vue項目中有時會使用到Base6464轉碼,現將自己使用的一種方法記錄下來,對vue使用Base64相關知識感興趣的朋友一起看看吧2024-02-02
這篇文章主要為大家介紹了vuex的核心概念和基本使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12