引子

博客的后臺(tái)管理頁(yè)面需要有登錄系統(tǒng)，所以考慮做一下路由鑒權(quán)，實(shí)現(xiàn)方式也是 Nuxt 官網(wǎng)給出栗子來(lái)改寫，順便也將前后端路由給統(tǒng)一了。

路由攔截

前端方面主要通過(guò)利用 Nuxt 的中間件來(lái)做路由攔截，這里也是需要 Vuex 狀態(tài)樹(shù)來(lái)做。

middleware

middleware/auth.js

export default function ({ store, redirect }) {  if (!store.state.user) {  return redirect('/login') }}

通過(guò)對(duì)狀態(tài)樹(shù)上的用戶信息是否存在來(lái)鑒權(quán)，來(lái)對(duì)頁(yè)面進(jìn)行重定向

layouts/admin.vue

export default {  middleware: 'auth',  components: {   AdminAside  } }

在后臺(tái)管理系統(tǒng)的頁(yè)面布局上添加 中間件

nuxtServerInit

在 NuxtJs 的渲染流程中，當(dāng)請(qǐng)求打入時(shí)，最先調(diào)用的即是 nuxtServerInit 方法，可以通過(guò)這個(gè)方法預(yù)先將服務(wù)器的數(shù)據(jù)保存。

我們可以利用該方法來(lái)接收存儲(chǔ)用戶信息的 Session 信息。

nuxtServerInit ({ commit }, { req, res }) {  if (req.session && req.session.user) {   const { username, password } = req.session.user   const user = {    username,    password   }   commit('SET_USER', user)  } },

當(dāng)應(yīng)用完畢時(shí)，一些我們從服務(wù)器獲取到的數(shù)據(jù)就會(huì)被填充到這個(gè)狀態(tài)樹(shù) (store) 上。

按照 NuxtJs 官網(wǎng)給出的栗子來(lái)看，到這里基本算把頁(yè)面中路由鑒權(quán)部分寫完了，接下來(lái)是對(duì)服務(wù)器端該部分代碼的寫作

使用Koa和koa-session

Koa和koa-session

后端代碼我采用是 Koa 框架，以及 koa-session 來(lái)對(duì) Session 做處理。

在新建 nuxt 項(xiàng)目的時(shí)候直接選用 Koa 框架即可

vue init nuxt/koa

相關(guān)依賴

npm install koa-session

在 server.js 中改寫

import Koa from 'koa'import { Nuxt, Builder } from 'nuxt'// after endimport session from 'koa-session'async function start () { const app = new Koa() const host = process.env.HOST || '127.0.0.1' const port = process.env.PORT || 7998 // Import and Set Nuxt.js options let config = require('../nuxt.config.js') config.dev = !(app.env === 'production') // Instantiate nuxt.js const nuxt = new Nuxt(config) // Build in development if (config.dev) {  const builder = new Builder(nuxt)  await builder.build() } // body-parser app.use(bodyParser()) // mongodb // session app.keys = ['some session'] const CONFIG = {  key: 'SESSION', /** (string) cookie key (default is koa:sess) */  /** (number || 'session') maxAge in ms (default is 1 days) */  /** 'session' will result in a cookie that expires when session/browser is closed */  /** Warning: If a session cookie is stolen, this cookie will never expire */  maxAge: 86400000,  overwrite: true, /** (boolean) can overwrite or not (default true) */  httpOnly: true, /** (boolean) httpOnly or not (default true) */  signed: true, /** (boolean) signed or not (default true) */  rolling: false /** (boolean) Force a session identifier cookie to be set on every response. The expiration is reset to the original maxAge, resetting the expiration countdown. default is false **/ } app.use(session(CONFIG, app)) // routes app.use(async (ctx, next) => {  await next()  ctx.status = 200 // koa defaults to 404 when it sees that status is unset  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)   })  }) }) app.listen(port, host) console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console}start()