详解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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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/06/28 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
实现复选框全选/全不选切换
2006/12/23 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
python 检查文件mime类型的方法
2018/12/08 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
社区包粽子活动方案
2014/01/21 职场文书
网络编辑职责
2014/03/01 职场文书
工作岗位职责范本
2015/02/15 职场文书
简历中自我评价范文
2015/03/11 职场文书
高中语文教学反思范文
2016/02/16 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android