這里我們以用戶登錄鑒權(quán)為例
十余年的錯那網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整錯那建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“錯那網(wǎng)站設計”,“錯那網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
express依賴express-session中間件實現(xiàn)session功能
若我們不加載express-session組件
重慶分公司
重慶分公司
router.get('/user/login', function (req, res) {
console.log(req,req.session)
})
會發(fā)現(xiàn)不存在session對象
引入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ù)組對象。。。好了，下面就可以使用了
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 //將返回的用戶數(shù)據(jù)存到session
}
res.json(_res.body)
})
}seeesion搞定了，怎么進行鑒權(quán)呢?
首先，將用戶session保存到store，以便全局取用
nuxtServerInit 方法：如果在狀態(tài)樹中指定了 nuxtServerInit 方法，Nuxt.js 調(diào)用它的時候會將頁面的上下文對象作為第2個參數(shù)傳給它（服務端調(diào)用時才會醬紫喲）。當我們想將服務端的一些數(shù)據(jù)傳到客戶端時，這個方法是灰常好用的。
舉個例子，假設我們服務端的會話狀態(tài)樹里可以通過 req.session.user 來訪問當前登錄的用戶。將該登錄用戶信息傳給客戶端的狀態(tài)樹，我們只需更新 store/index.js 如下：
actions: {
nuxtServerInit ({ commit }, { req }) {
if (req.session.user) {
commit('user', req.session.user)
}
}
}
這樣我們就可以通過判斷store中user的狀態(tài)來知道用戶是否登錄。
在跳轉(zhuǎn)時需要鑒權(quán)的頁面添加中間件：
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)登錄頁面登錄，調(diào)用登錄接口保存用戶session，返回a，再次跳轉(zhuǎn)b，nuxtServerInit 從上下文對象中獲取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以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
