当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解nuxt路由鉴权(express模板)

详解nuxt路由鉴权(express模板)

2018年11月30日  | 移动技术网IT编程  | 我要评论

安全证书错误怎么办,傲剑紫霞神功数据,大学专业全新评点

这里我们以用户登录鉴权为例

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网