详解nuxt路由鉴权(express模板)

时间:2021-05-25

这里我们以用户登录鉴权为例

express依赖express-session中间件实现session功能

若我们不加载express-session组件

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

会发现不存在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 方法:如果在状态树中指定了 nuxtServerInit 方法,Nuxt.js 调用它的时候会将页面的上下文对象作为第2个参数传给它(服务端调用时才会酱紫哟)。当我们想将服务端的一些数据传到客户端时,这个方法是灰常好用的。

举个例子,假设我们服务端的会话状态树里可以通过 req.session.user 来访问当前登录的用户。将该登录用户信息传给客户端的状态树,我们只需更新 store/index.js 如下:

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

这样我们就可以通过判断store中user的状态来知道用户是否登录。

在跳转时需要鉴权的页面添加中间件:

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 || 3000const 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 Routesapp.use('/api', api)app.use('/', api)// Import and Set Nuxt.js optionslet config = require('../nuxt.config.js')config.dev = !(process.env.NODE_ENV === 'production')// Init Nuxt.jsconst nuxt = new Nuxt(config)// Build only in dev modeif (config.dev) { const builder = new Builder(nuxt) builder.build()}// Give nuxt middleware to expressapp.use(nuxt.render)// Listen the serverapp.listen(port, host)console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章