其實(shí)動(dòng)態(tài)路由就是帶參數(shù)的路由。比如我們現(xiàn)在新聞模塊下面有很多新聞詳情頁(yè)，這時(shí)候就需要?jiǎng)討B(tài)路由的幫助了。

新聞詳細(xì)頁(yè)面

我們?cè)趎ews文件夾下面新建了_id.vue的文件，以下劃線為前綴的Vue文件就是動(dòng)態(tài)路由，然后在文件里邊有$route.params.id來(lái)接收參數(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>

修改新聞首頁(yè)路由

我們?cè)?pages/news/index.vue進(jìn)行修改，增加兩個(gè)詳細(xì)頁(yè)的路由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>

動(dòng)態(tài)參數(shù)校驗(yàn)

進(jìn)入一個(gè)頁(yè)面，對(duì)參數(shù)傳遞的正確性校驗(yàn)是必須的，Nuxt.js也貼心的為我們準(zhǔn)備了校驗(yàn)方法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傳遞進(jìn)去，然后用正則進(jìn)行了校驗(yàn)，如果正則返回了true正常進(jìn)入頁(yè)面，如果返回false進(jìn)入404頁(yè)面。

補(bǔ)充知識(shí)：Nuxt 實(shí)現(xiàn)用戶鑒權(quán)登陸

引言

博客前臺(tái)重構(gòu)完畢了，接下來(lái)就是后臺(tái)部分了，后臺(tái)的主要功能就是發(fā)布、刪除、修改文章，自然不是誰(shuí)都能隨便進(jìn)的。在 vue 項(xiàng)目中，我是在 Vue Router 的全局前置守衛(wèi)里判斷當(dāng)前用戶是否有 cookie 從而判斷是否有權(quán)進(jìn)入后臺(tái)。而 Nuxt 相比 Vue 項(xiàng)目最大的不同之一就是沒(méi)有使用 Vue Router 而是使用 目錄來(lái)進(jìn)行頁(yè)面路由，自然我們就失去了 全局前置守衛(wèi)這個(gè)利器，當(dāng)然 Nuxt 是有解決辦的，不過(guò)在那之前我們需要先來(lái)了解一下鑒權(quán)的原理。

Cookie 和 Session

相信前端的同學(xué)們對(duì)這兩個(gè)名字早就有所耳聞，卻不一定有詳細(xì)的了解。眾所周知，我們?yōu)g覽網(wǎng)頁(yè)使用的 HTTP 協(xié)議是無(wú)狀態(tài)的的，也就是說(shuō)你每一次請(qǐng)求對(duì)于服務(wù)器來(lái)說(shuō)都是一樣的，它沒(méi)有辦法記住這個(gè)請(qǐng)求是你發(fā)的。所以這里就要用到Cookie。

Cookie 是服務(wù)端設(shè)置的，由瀏覽器儲(chǔ)存在你的硬盤中的一組數(shù)據(jù)，，比如你的用戶 數(shù)據(jù)，每次向服務(wù)器發(fā)送請(qǐng)求就會(huì)攜帶上這個(gè)數(shù)據(jù)。服務(wù)器查看就能知道這是誰(shuí)發(fā)過(guò)來(lái)的。這一過(guò)程就稱為Session（會(huì)話）

Session 初始是指一種概念，是你和網(wǎng)站發(fā)生交互的一個(gè)周期。在這個(gè)周期中服務(wù)器就是通過(guò)儲(chǔ)存在瀏覽器的 Cookie 來(lái)判別你是誰(shuí)。但是因?yàn)閮?chǔ)存在本地的Cookie并不安全，誰(shuí)都可以看到并更改，所以現(xiàn)在更為流行的做法是僅僅通過(guò) Cookie 保存 的唯一的用戶標(biāo)識(shí)符（SessionID）來(lái)識(shí)別用戶，而用戶信息儲(chǔ)存在服務(wù)器端。所以 Session 這個(gè)概念可以說(shuō)是 Cookie 的上級(jí)也可以說(shuō)是其同級(jí)

Nuxt 鑒權(quán)

講解了 Nuxt 鑒權(quán)的基本原理，我們可以知道鑒權(quán)就是在在用戶進(jìn)入這個(gè)頁(yè)面的時(shí)候?qū)Ρ镜氐?Cookie 進(jìn)行判斷，存在設(shè)置好的 Cookie 那么說(shuō)明這個(gè)用戶已經(jīng)登陸過(guò)了，放他過(guò)去。啥也沒(méi)有？ 不行你去給我登陸，就跳轉(zhuǎn)到登錄頁(yè)面。明白了這個(gè)流程就開始具體的工作了。

服務(wù)器端

在服務(wù)器端我們使用 koa-session 安裝 koa-session

npm install koa-session

npm install koa-session-mongoose //使用 mongodb 儲(chǔ)存 Session 信息

然后在入口文件中這樣使用

app.use(
 session(
  {
   key: "***",     //加密密鑰
   overwrite: true,  //覆寫Cookie
   httpOnly: true,   //經(jīng)允許通過(guò) JS 來(lái)更改
   renew: true,
   store: new MongooseStore({
    createIndexes: "appSessions",
    connection: mongoose,
    expires: 86400, // 1 day is the default
    name: "AppSession"
   })         //傳入一個(gè)用于session的外部?jī)?chǔ)存，我這里是使用了 mongodb 
  },
  app
 )
);

因?yàn)?koa 默認(rèn)會(huì)把 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ù)庫(kù)是否又對(duì)應(yīng)的用戶名和密碼，存在的話，給客戶端設(shè)置一個(gè) 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 } });
  }
 }

服務(wù)端設(shè)置完成了

客戶端（Nuxt）

其實(shí)以上的步驟和 Vue 項(xiàng)目中一模一樣，Nuxt 中主要的不同就是失去了全局前置守衛(wèi)，那么要在哪里判斷是否存在 Cookie 呢，別急，Nuxt 官方自然是給了解決方案，先看一下 Nuxt 的生命周期

image

這里我們用到的就是紅框中的 nuxtServerInit 和 middleware 這兩個(gè)時(shí)期，先來(lái)看代碼

// 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ù)是整個(gè)生命周期 最先運(yùn)行的，我們就在這里判斷當(dāng)前用戶瀏覽器中是否有 Cookie ，如果有的話就在 state 中用一個(gè)字段保存下來(lái)。是不是還挺像全局前置守衛(wèi)。這里還只是做了判斷，打上了印記你登沒(méi)登陸，攔截在哪里呢，別急，就是下一個(gè)流程 middleware 中。

打開 middleware 文件夾( Nuxt 項(xiàng)目自帶)，新建 auth.js 文件

// auth.js
export default function ({ store, redirect }) {
 if (!store.state.authUser) {
  return redirect('/welcome')
 }
}

瞧一下 Vuex 中看看你有沒(méi)有登陸，沒(méi)有的話把你送到登陸頁(yè)面去，簡(jiǎn)單直接吧，只要在需要鑒權(quán)的頁(yè)面引用這個(gè)中間件即可，對(duì)于此項(xiàng)目只要在后臺(tái)管理頁(yè)面引用就好

export default {
  middleware: 'auth',
};

總結(jié)

就這樣完成了鑒權(quán)的操作，沒(méi)有登陸過(guò)的用戶在訪問(wèn)后臺(tái)是時(shí)候會(huì)被重定向到登陸頁(yè)面去，就是很簡(jiǎn)單的使用了一下 Cookie ，限于項(xiàng)目性質(zhì)，session 的很多功能并沒(méi)有用到，比如在服務(wù)器端儲(chǔ)存用戶信息。主要是它的功能也就是防止別人訪問(wèn)后臺(tái)，非常簡(jiǎn)單。

以上這篇Nuxt的動(dòng)態(tài)路由和參數(shù)校驗(yàn)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論