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

 更新时间:2018年11月21日 10:12:44   作者:ch_Asion  
这篇文章主要介绍了详解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

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

相关文章

  • vue项目中如何使用video.js实现视频播放与视频进度条打点

    vue项目中如何使用video.js实现视频播放与视频进度条打点

    这篇文章主要给大家介绍了关于vue项目中如何使用video.js实现视频播放与视频进度条打点的相关资料,video.js是一款基于HTML5的网络视频播放器,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Vue2 使用 Echarts 创建图表实例代码

    Vue2 使用 Echarts 创建图表实例代码

    本篇文章主要介绍了Vue2 使用 Echarts 创建图表实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • keep-Alive搭配vue-router实现缓存页面效果的示例代码

    keep-Alive搭配vue-router实现缓存页面效果的示例代码

    这篇文章主要介绍了keep-Alive搭配vue-router实现缓存页面效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • VSCode创建Vue项目的完整步骤教程

    VSCode创建Vue项目的完整步骤教程

    Vue是一个轻量级、渐进式的Javascript框架,如果想要要开发全新的Vue项目,建议项目构建工具vue-cli,下面这篇文章主要给大家介绍了关于VSCode创建Vue项目的完整步骤,需要的朋友可以参考下
    2022-06-06
  • vue-upload上传图片详细使用方法

    vue-upload上传图片详细使用方法

    这篇文章主要介绍了使用vue-upload上传图片的详细使用说明,文中有相关的代码示例供大家参考,感兴趣的小伙伴一起跟着小编来学习吧
    2023-05-05
  • 在Vue3项目中关闭ESLint的完整步骤

    在Vue3项目中关闭ESLint的完整步骤

    实际上在学习过程中,你会发现eslint检查特别讨厌,这个时候我们需要关闭掉eslint检查,下面这篇文章主要给大家介绍了关于在Vue3项目中关闭ESLint的完整步骤,需要的朋友可以参考下
    2023-11-11
  • Nuxt封装@nuxtjs/axios请求后端数据方式

    Nuxt封装@nuxtjs/axios请求后端数据方式

    这篇文章主要介绍了Nuxt封装@nuxtjs/axios请求后端数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vant框架van-cell插槽无法换行问题及解决

    vant框架van-cell插槽无法换行问题及解决

    这篇文章主要介绍了vant框架van-cell插槽无法换行问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • VUE v-model表单数据双向绑定完整示例

    VUE v-model表单数据双向绑定完整示例

    这篇文章主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 在Vue-cli里应用Vuex的state和mutations方法

    在Vue-cli里应用Vuex的state和mutations方法

    今天小编就为大家分享一篇在Vue-cli里应用Vuex的state和mutations方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论