详解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 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 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测试程序运行时间的类
2012/02/05 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
解决layer图标icon不加载的问题
2019/09/04 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
Python中下划线的使用方法
2015/03/27 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
Python新手学习标准库模块命名
2020/05/29 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
临床医学应届生求职信
2013/11/06 职场文书
手机业务员岗位职责
2013/12/13 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
原材料检验岗位职责
2014/03/15 职场文书
静心口服夜广告词
2014/03/20 职场文书
父母寄语大全
2014/04/12 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
阿甘正传观后感
2015/06/01 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
2019销售早会主持词
2019/06/27 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android