详解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中复制行和删除行的操作实例
Jun 25 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 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多维数组元素操作类的方法
2016/11/14 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
设定php简写功能的方法
2019/11/28 PHP
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
小程序实现分类页
2019/07/12 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python实现快速计算词频功能示例
2018/06/25 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
Linux机考试题
2015/07/17 面试题
毕业生的自我评价
2013/12/30 职场文书
学子宴答谢词
2014/01/25 职场文书
生活部的活动方案
2014/08/19 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
邀请书模板
2015/02/02 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS