這里我們以用戶登錄鑒權為例
十余年的錯那網站建設經驗,針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務,響應快,48小時及時工作處理。成都全網營銷的優(yōu)勢是能夠根據用戶設備顯示端的尺寸不同,自動調整錯那建站的顯示方式,使網站能夠適用不同顯示終端,在瀏覽器中調整網站的寬度,無論在任何一種瀏覽器上瀏覽網站,都能展現優(yōu)雅布局與設計,從而大程度地提升瀏覽體驗。創(chuàng)新互聯從事“錯那網站設計”,“錯那網站推廣”以來,每個客戶項目都認真落實執(zhí)行。
express依賴express-session中間件實現session功能
若我們不加載express-session組件
router.get('/user/login', function (req, res) { console.log(req,req.session) })
會發(fā)現不存在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) })
這時可以看到打印出空數組對象。。。好了,下面就可以使用了
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 //將返回的用戶數據存到session } res.json(_res.body) }) }
seeesion搞定了,怎么進行鑒權呢?
首先,將用戶session保存到store,以便全局取用
nuxtServerInit 方法:如果在狀態(tài)樹中指定了 nuxtServerInit 方法,Nuxt.js 調用它的時候會將頁面的上下文對象作為第2個參數傳給它(服務端調用時才會醬紫喲)。當我們想將服務端的一些數據傳到客戶端時,這個方法是灰常好用的。
舉個例子,假設我們服務端的會話狀態(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)來知道用戶是否登錄。
在跳轉時需要鑒權的頁面添加中間件:
export default{ middleware: auth }
auth.js
export default function ({store,redirect}) { if (!store.state.authUser) { return redirect('/user/login') } }
大概流程:a–>b middleware鑒權未登錄,跳轉登錄頁面登錄,調用登錄接口保存用戶session,返回a,再次跳轉b,nuxtServerInit 從上下文對象中獲取session保存在store,鑒權成功,跳轉成功。
拓展: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
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯。
分享標題:詳解nuxt路由鑒權(express模板)
分享地址:http://muchs.cn/article46/ihcgeg.html
成都網站建設公司_創(chuàng)新互聯,為您提供電子商務、外貿建站、網站策劃、云服務器、網站營銷、定制網站
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯