nuxt框架中路由鉴权之Koa和Session的用法
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
引子
博客的后台管理页面需要有登录系统,所以考虑做一下路由鉴权,实现方式也是 Nuxt 官网给出栗子来改写,顺便也将前后端路由给统一了。
路由拦截
前端方面主要通过利用 Nuxt 的中间件来做路由拦截,这里也是需要 Vuex 状态树来做。
middleware
middleware/auth.js
1 2 3 4 5 6 | export default function ({ store, redirect }) { if (!store.state.user) { return redirect( '/login' ) } } |
通过对状态树上的用户信息是否存在来鉴权,来对页面进行重定向
layouts/admin.vue
在后台管理系统的页面布局上添加 中间件
nuxtServerInit
在 NuxtJs 的渲染流程中,当请求打入时,最先调用的即是 nuxtServerInit 方法,可以通过这个方法预先将服务器的数据保存。
我们可以利用该方法来接收存储用户信息的 Session 信息。
1 2 3 4 5 6 7 8 9 10 11 | nuxtServerInit ({ commit }, { req, res }) { if (req.session && req.session.user) { const { username, password } = req.session.user const user = { username, password } commit( 'SET_USER' , user) } }, |
当应用完毕时,一些我们从服务器获取到的数据就会被填充到这个状态树 (store) 上。
按照 NuxtJs 官网给出的栗子来看,到这里基本算把页面中路由鉴权部分写完了,接下来是对服务器端该部分代码的写作
使用Koa和koa-session
Koa和koa-session
后端代码我采用是 Koa 框架,以及 koa-session 来对 Session 做处理。
在新建 nuxt 项目的时候直接选用 Koa 框架即可
相关依赖
在 server.js 中改写
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import Koa from 'koa' import { Nuxt, Builder } from 'nuxt' // after end import session from 'koa-session' async function start () { const app = new Koa() const host = process.env.HOST || '127.0.0.1' const port = process.env.PORT || 7998 // Import and Set Nuxt.js options let config = require( '../nuxt.config.js' ) config.dev = !(app.env === 'production' ) // Instantiate nuxt.js const nuxt = new Nuxt(config) // Build in development if (config.dev) { const builder = new Builder(nuxt) await builder.build() } // body-parser app.use(bodyParser()) // mongodb // session app.keys = [ 'some session' ] const CONFIG = { key: 'SESSION' , /** (string) cookie key (default is koa:sess) */ /** (number || 'session') maxAge in ms (default is 1 days) */ /** 'session' will result in a cookie that expires when session/browser is closed */ /** Warning: If a session cookie is stolen, this cookie will never expire */ maxAge: 86400000, overwrite: true , /** (boolean) can overwrite or not (default true) */ httpOnly: true , /** (boolean) httpOnly or not (default true) */ signed: true , /** (boolean) signed or not (default true) */ rolling: false /** (boolean) Force a session identifier cookie to be set on every response. The expiration is reset to the original maxAge, resetting the expiration countdown. default is false **/ } app.use(session(CONFIG, app)) // routes app.use(async (ctx, next) => { await next() ctx.status = 200 // koa defaults to 404 when it sees that status is unset return new Promise((resolve, reject) => { ctx.res.on( 'close' , resolve) ctx.res.on( 'finish' , resolve) nuxt.render(ctx.req, ctx.res, promise => { // nuxt.render passes a rejected promise into callback on error. promise.then(resolve). catch (reject) }) }) }) app.listen(port, host) console.log( 'Server listening on ' + host + ':' + port) // eslint-disable-line no-console } start() |
对于 koa-session 的用法,可以参考:从koa-session中间件学习cookie与session
登录路由
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | // 登录 router.post( '/api/login' , async (ctx, next) => { const { username, password } = ctx.request.body let user, match try { user = await Admin.findOne({ user: username }).exec() if (user) { match = await user.comparePassword(password, user.password) } } catch (e) { throw new Error(e) } if (match) { ctx.session.user = { _id: user._id, username: user.user, nickname: user.nickname, role: user.role } console.log(ctx.session) return (ctx.body = { success: true , data: { username: user.user, nickname: user.nickname } }) } return (ctx.body = { success: false , err: '密码错误' }) }) |
写到这里,整个功能流程基本完毕了,也非常的顺畅,但是对我来说一帆风顺的代码是不存在的。
session is not defined
问题
1 2 3 4 5 6 7 8 9 10 11 | nuxtServerInit ({ commit }, { req, res }) { if (req.session && req.session.user) { // res.session is not defined const { username, password } = req.session.user const user = { username, password } commit( 'SET_USER' , user) } } |
在 nuxtServerInit 获取不到有关 session 的任何信息,然而其他的 api 均可获取到 session ,当时由于苦苦找不到原因,一度怀疑栗子有问题。。
原因
最终的问题还是因为自己的粗心,忽视了一些细节,在官网给出的栗子中:
1 2 3 4 5 6 7 | app.post( '/api/login' , function (req, res) { if (req.body.username === 'demo' && req.body.password === 'demo' ) { req.session.authUser = { username: 'demo' } return res.json({ username: 'demo' }) } res.status(401).json({ error: 'Bad credentials' }) }) |
它将 session 保存在了 req.session , 所以在 nuxtServerInit session也确实存在于 req.session ,而我使用的 Koa2 和 Koa-session , Koa-session 将 cookie 解析到了 ctx.session , 它并不存在于 req.session 。
解决
所以在将 nuxt.render 注入的时候,将 session 添加进 request 中
1 2 3 4 5 6 7 8 9 10 11 12 13 | app.use(async (ctx, next) => { await next() ctx.status = 200 // koa defaults to 404 when it sees that status is unset ctx.req.session = ctx.session return new Promise((resolve, reject) => { ctx.res.on( 'close' , resolve) ctx.res.on( 'finish' , resolve) nuxt.render(ctx.req, ctx.res, promise => { // nuxt.render passes a rejected promise into callback on error. promise.then(resolve). catch (reject) }) }) }) |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
关于element ui的菜单default-active默认选中的问题
这篇文章主要介绍了关于element ui的菜单default-active默认选中的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-05-05Vue结合ElementUI上传Base64编码后的图片实例
这篇文章主要介绍了Vue结合ElementUI上传Base64编码后的图片实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解
这篇文章主要介绍了Vue初学基础中的模板语法、数据绑定、Object.defineProperty方法等基础,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-09-09
最新评论