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


Posted in Javascript onNovember 21, 2018

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

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

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

Javascript 相关文章推荐
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 #Javascript
Angular刷新当前页面的实现方法
Nov 21 #Javascript
详解ES6系列之私有变量的实现
Nov 21 #Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 #Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 #Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 #Javascript
You might like
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
canvas知识总结
2017/01/25 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
Python多线程和队列操作实例
2015/06/21 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python json转字典字符方法实例解析
2020/04/13 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
橄榄树药房:OLIVEDA
2019/09/01 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
社区文化建设方案
2014/05/02 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
学前班语言教学计划
2015/01/20 职场文书
导游词格式
2015/02/13 职场文书
亮剑观后感600字
2015/06/05 职场文书
农村老人去世追悼词
2015/06/23 职场文书
中学总务处工作总结
2015/08/12 职场文书
初二英语教学反思
2016/02/15 职场文书