這里我們以用戶(hù)登錄鑒權(quán)為例

十余年的錯(cuò)那網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷(xiāo)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整錯(cuò)那建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“錯(cuò)那網(wǎng)站設(shè)計(jì)”,“錯(cuò)那網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

express依賴(lài)express-session中間件實(shí)現(xiàn)session功能

若我們不加載express-session組件

router.get('/user/login', function (req, res) {
 console.log(req,req.session)
})

會(huì)發(fā)現(xiàn)不存在session對(duì)象

引入express-session組件

// server/index.js文件
...
import session from 'express-session'
...
app.use(session)
...

然后再試試

router.get('/user/login', function (req, res) {
 console.log(req.session)
})

這時(shí)可以看到打印出空數(shù)組對(duì)象。。。好了，下面就可以使用了

import {Router} from 'express'
const router = Router()
import request from 'superagent'
router.get('/user/login', function (req, res) {
  request
   .get(path)
   .query(req.query)
   .set('Content-Type', 'application/json;charset=UTF-8')
   .end((err, _res) => {
    if (_res.body.code === 200) {
     req.session.authUser = _res.body.data //將返回的用戶(hù)數(shù)據(jù)存到session
    }
    res.json(_res.body)
   })
}

seeesion搞定了，怎么進(jìn)行鑒權(quán)呢?

首先，將用戶(hù)session保存到store，以便全局取用
nuxtServerInit 方法：如果在狀態(tài)樹(shù)中指定了 nuxtServerInit 方法，Nuxt.js 調(diào)用它的時(shí)候會(huì)將頁(yè)面的上下文對(duì)象作為第2個(gè)參數(shù)傳給它（服務(wù)端調(diào)用時(shí)才會(huì)醬紫喲）。當(dāng)我們想將服務(wù)端的一些數(shù)據(jù)傳到客戶(hù)端時(shí)，這個(gè)方法是灰常好用的。

舉個(gè)例子，假設(shè)我們服務(wù)端的會(huì)話狀態(tài)樹(shù)里可以通過(guò) req.session.user 來(lái)訪問(wèn)當(dāng)前登錄的用戶(hù)。將該登錄用戶(hù)信息傳給客戶(hù)端的狀態(tài)樹(shù)，我們只需更新 store/index.js 如下：

actions: {
 nuxtServerInit ({ commit }, { req }) {
  if (req.session.user) {
   commit('user', req.session.user)
  }
 }
}

這樣我們就可以通過(guò)判斷store中user的狀態(tài)來(lái)知道用戶(hù)是否登錄。

在跳轉(zhuǎn)時(shí)需要鑒權(quán)的頁(yè)面添加中間件：

export default{
  middleware: auth
}

auth.js

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

大概流程：a–>b middleware鑒權(quán)未登錄，跳轉(zhuǎn)登錄頁(yè)面登錄，調(diào)用登錄接口保存用戶(hù)session，返回a，再次跳轉(zhuǎn)b，nuxtServerInit 從上下文對(duì)象中獲取session保存在store，鑒權(quán)成功，跳轉(zhuǎn)成功。

拓展：connect-redis

sever/index配置

import express from 'express'
import {
 Nuxt,
 Builder
} from 'nuxt'
import session from 'express-session'
import redis from 'connect-redis'
import bodyParser from 'body-parser'
import api from './api'
import serverConfig from './config' //redis配置文件

const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

const RedisStore = redis(session)
app.use(bodyParser.json())

app.use('/static', express.static('static'))

app.use(session({
 name: 'sid',
 secret: 'Asecret123-',
 resave: true,
 rolling: true,
 saveUninitialized: false,
 store: new RedisStore(serverConfig)
}))

app.set('port', port)

// Import API Routes
app.use('/api', api)

app.use('/', api)

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

// Init Nuxt.js
const nuxt = new Nuxt(config)

// Build only in dev mode
if (config.dev) {
 const builder = new Builder(nuxt)
 builder.build()
}

// Give nuxt middleware to express
app.use(nuxt.render)

// Listen the server
app.listen(port, host)
console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享標(biāo)題：詳解nuxt路由鑒權(quán)(express模板)
分享地址：http://chinadenli.net/article46/ihcgeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、外貿(mào)建站、網(wǎng)站策劃、云服務(wù)器、網(wǎng)站營(yíng)銷(xiāo)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)