详解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 - css() 方法示例详解
Jan 16 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
angularJS深拷贝详解
Mar 23 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
js绘制一条直线并旋转45度
Aug 21 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查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
Javascript实现的分页函数
2006/12/22 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
Python线程指南详细介绍
2017/01/05 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python+opencv实现阈值分割
2018/12/26 Python
django模板结构优化的方法
2019/02/28 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
模具专业毕业推荐信
2014/03/08 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
Nginx缓存设置案例详解
2021/09/15 Servers
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL