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

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

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

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