详解nuxt路由鉴权(express模板)
程序员文章站
2022-05-29 18:10:13
这里我们以用户登录鉴权为例
express依赖express-session中间件实现session功能
若我们不加载express-session组件...
这里我们以用户登录鉴权为例
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 || 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 品牌知名度对网站建设的影响