详解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 相关文章推荐
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
js中的this关键字详解
Sep 25 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
详解js删除数组中的指定元素
Oct 31 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
使用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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
用Python编程实现语音控制电脑
2014/04/01 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
win10安装python3.6的常见问题
2020/07/01 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
优秀应届毕业生推荐信
2014/02/18 职场文书
授权委托书
2014/07/31 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书