精华内容
下载资源
问答
  • 主要介绍了详解nuxt路由鉴权(express模板),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 这里我们以用户登录鉴权为例express依赖express-session中间件实现session功能若我们不加载express-session组件router.get('/user/login', function (req, res) {console.log(req,req.session)})会发现不存在session...

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

    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

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

    展开全文
  • nuxt路由鉴权(express模板)

    千次阅读 2018-08-22 10:37:43
    //这里我们以用户登录鉴权为例 express依赖express-session中间件实现session功能 若我们不加载express-session组件 router.get('/user/login', function (req, res) { console.log(req,req.session) }) 会...

    //这里我们以用户登录鉴权为例
    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
    
    展开全文
  • 引言博客前台重构完毕了,接下来就是后台部分了,后台的主要功能...而 Nuxt 相比 Vue 项目最大的不同之一就是没有使用 Vue Router 而是使用 目录来进行页面路由,自然我们就失去了 全局前置守卫这个利器,当然 Nux...

    引言

    博客前台重构完毕了,接下来就是后台部分了,后台的主要功能就是发布、删除、修改文章,自然不是谁都能随便进的。在 vue 项目中,我是在 Vue Router 的全局前置守卫里判断当前用户是否有 cookie 从而判断是否有权进入后台。而 Nuxt 相比 Vue 项目最大的不同之一就是没有使用 Vue Router 而是使用 目录来进行页面路由,自然我们就失去了 全局前置守卫这个利器,当然 Nuxt 是有解决办的,不过在那之前我们需要先来了解一下鉴权的原理。

    Cookie 和 Session

    相信前端的同学们对这两个名字早就有所耳闻,却不一定有详细的了解。众所周知,我们浏览网页使用的 HTTP 协议是无状态的的,也就是说你每一次请求对于服务器来说都是一样的,它没有办法记住这个请求是你发的。所以这里就要用到Cookie。

    Cookie 是服务端设置的,由浏览器储存在你的硬盘中的一组数据,,比如你的用户 数据,每次向服务器发送请求就会携带上这个数据。服务器查看就能知道这是谁发过来的。这一过程就称为Session(会话)

    Session 初始是指一种概念,是你和网站发生交互的一个周期。在这个周期中服务器就是通过储存在浏览器的 Cookie 来判别你是谁。但是因为储存在本地的Cookie并不安全,谁都可以看到并更改,所以现在更为流行的做法是仅仅通过 Cookie 保存 的唯一的用户标识符(SessionID)来识别用户,而用户信息储存在服务器端。所以 Session 这个概念可以说是 Cookie 的上级也可以说是其同级

    Nuxt 鉴权

    讲解了 Nuxt 鉴权的基本原理,我们可以知道鉴权就是在在用户进入这个页面的时候对本地的 Cookie 进行判断,存在设置好的 Cookie 那么说明这个用户已经登陆过了,放他过去。啥也没有? 不行你去给我登陆,就跳转到登录页面。明白了这个流程就开始具体的工作了。

    服务器端

    在服务器端我们使用 koa-session 安装 koa-session

    npm install koa-session

    npm install koa-session-mongoose //使用 mongodb 储存 Session 信息

    然后在入口文件中这样使用

    app.use(

    session(

    {

    key: "***", //加密密钥

    overwrite: true, //覆写Cookie

    httpOnly: true, //经允许通过 JS 来更改

    renew: true,

    store: new MongooseStore({

    createIndexes: "appSessions",

    connection: mongoose,

    expires: 86400, // 1 day is the default

    name: "AppSession"

    }) //传入一个用于session的外部储存,我这里是使用了 mongodb

    },

    app

    )

    );

    因为 koa 默认会把 Session 打到 ctx.session 中,不方便用户端获取,所以我们把它移一下位,挪到 ctx.req.session 中

    app.use((ctx) => {

    ctx.status = 200

    ctx.respond = false // Bypass Koa's built-in response handling

    ctx.req.session = ctx.session

    ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash

    return new Promise((resolve, reject) => {

    ctx.res.on('close', resolve)

    ctx.res.on('finish', resolve)

    nuxt.render(ctx.req, ctx.res, promise => {

    // nuxt.render passes a rejected promise into callback on error.

    promise.then(resolve).catch(reject)

    })

    })

    })

    这是登陆函数,查询数据库是否又对应的用户名和密码,存在的话,给客户端设置一个 Cookie 返回登录成功

    static async login(ctx) {

    let { passwd, email } = ctx.request.body;

    let hasuser = await UserModel.findOne({ email: email, passwd: md(passwd) });

    if (!hasuser) {

    return ctx.error({});

    }

    else {

    let userid = hasuser._id;

    const { session } = ctx;

    session.userid = userid;

    return ctx.success({ data: { userid: userid } });

    }

    }

    服务端设置完成了

    客户端(Nuxt)

    其实以上的步骤和 Vue 项目中一模一样,Nuxt 中主要的不同就是失去了全局前置守卫,那么要在哪里判断是否存在 Cookie 呢,别急,Nuxt 官方自然是给了解决方案,先看一下 Nuxt 的生命周期

    07fef850490e

    image

    这里我们用到的就是红框中的 nuxtServerInit 和 middleware 这两个时期,先来看代码

    // store/index.js Vuex 文件中

    export const actions = {

    // nuxtServerInit is called by Nuxt.js before server-rendering every page

    nuxtServerInit({ commit }, { req }) {

    if (req.session && req.session.userid) {

    console.log("用户已经登录");

    commit("SET_USER", req.session.userid);

    }

    },

    export const mutations = {

    SET_USER(state, user) {

    state.authUser = user;

    },

    }

    Store action 模块中的 nuxtServerInit 函数是整个生命周期 最先运行的,我们就在这里判断当前用户浏览器中是否有 Cookie ,如果有的话就在 state 中用一个字段保存下来。是不是还挺像全局前置守卫。这里还只是做了判断,打上了印记你登没登陆,拦截在哪里呢,别急,就是下一个流程 middleware 中。

    打开 middleware 文件夹( Nuxt 项目自带),新建 auth.js 文件

    // auth.js

    export default function ({ store, redirect }) {

    if (!store.state.authUser) {

    return redirect('/welcome')

    }

    }

    瞧一下 Vuex 中看看你有没有登陆,没有的话把你送到登陆页面去,简单直接吧,只要在需要鉴权的页面引用这个中间件即可,对于此项目只要在后台管理页面引用就好

    export default {

    middleware: 'auth',

    };

    总结

    就这样完成了鉴权的操作,没有登陆过的用户在访问后台是时候会被重定向到登陆页面去,就是很简单的使用了一下 Cookie ,限于项目性质,session 的很多功能并没有用到,比如在服务器端储存用户信息。主要是它的功能也就是防止别人访问后台,非常简单。

    还会有后续文章

    koa-session 源码分析

    使用 koa-session 将用户信息储存在 mongodb 中

    敬请期待

    Welcome to my Blog

    展开全文
  • 搜索热词引子博客的后台管理页面需要有登录系统,所以考虑做一下路由鉴权,实现方式也是 Nuxt 官网给出栗子来改写,顺便也将前后端路由给统一了。路由拦截前端方面主要通过利用 Nuxt 的中间件来做路由拦截,这里也是...

    搜索热词

    引子

    博客的后台管理页面需要有登录系统,所以考虑做一下路由鉴权,实现方式也是 Nuxt 官网给出栗子来改写,顺便也将前后端路由给统一了。

    路由拦截

    前端方面主要通过利用 Nuxt 的中间件来做路由拦截,这里也是需要 Vuex 状态树来做。

    middleware

    middleware/auth.js

    if (!store.state.user) {

    return redirect('/login')

    }

    }

    通过对状态树上的用户信息是否存在来鉴权,来对页面进行重定向

    layouts/admin.vue

    在后台管理系统的页面布局上添加 中间件

    nuxtServerInit

    在 NuxtJs 的渲染流程中,当请求打入时,最先调用的即是 nuxtServerInit 方法,可以通过这个方法预先将服务器的数据保存。

    我们可以利用该方法来接收存储用户信息的 Session 信息。

    commit('SET_USER',user)

    }

    },

    当应用完毕时,一些我们从服务器获取到的数据就会被填充到这个状态树 (store) 上。

    按照 NuxtJs 官网给出的栗子来看,到这里基本算把页面中路由鉴权部分写完了,接下来是对服务器端该部分代码的写作

    使用Koa和koa-session

    Koa和koa-session

    后端代码我采用是 Koa 框架,以及 koa-session 来对 Session 做处理。

    在新建 nuxt 项目的时候直接选用 Koa 框架即可

    相关依赖

    在 server.js 中改写

    import session from 'koa-session'

    async function start () {

    const app = new Koa()

    const host = process.env.HOST || '127.0.0.1'

    const port = process.env.PORT || 7998

    // Import and Set Nuxt.js options

    let config = require('../nuxt.config.js')

    config.dev = !(app.env === 'production')

    // Instantiate nuxt.js

    const nuxt = new Nuxt(config)

    // Build in development

    if (config.dev) {

    const builder = new Builder(nuxt)

    await builder.build()

    }

    // body-parser

    app.use(bodyParser())

    // mongodb

    // session

    app.keys = ['some session']

    const CONFIG = {

    key: 'SESSION',/(string) cookie key (default is koa:sess) */

    /*(number || 'session') maxAge in ms (default is 1 days)/

    / 'session' will result in a cookie that expires when session/browser is closed */

    /Warning: If a session cookie is stolen,this cookie will never expire */

    maxAge: 86400000,overwrite: true,/*(boolean) can overwrite or not (default true)/

    httpOnly: true,/ (boolean) httpOnly or not (default true) */

    signed: true,/*(boolean) signed or not (default true)/

    rolling: false /(boolean) Force a session identifier cookie to be set on every response. The expiration is reset to the original maxAge,resetting the expiration countdown. default is false/

    }

    app.use(session(CONFIG,app))

    // routes

    app.use(async (ctx,next) => {

    await next()

    ctx.status = 200 // koa defaults to 404 when it sees that status is unset

    return new Promise((resolve,reject) => {

    ctx.res.on('close',resolve)

    ctx.res.on('finish',resolve)

    nuxt.render(ctx.req,ctx.res,promise => {

    // nuxt.render passes a rejected promise into callback on error.

    promise.then(resolve).catch(reject)

    })

    })

    })

    app.listen(port,host)

    console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console

    }

    start()

    登录路由

    {

    const { username,password } = ctx.request.body

    let user,match

    try {

    user = await Admin.findOne({ user: username }).exec()

    if (user) {

    match = await user.comparePassword(password,user.password)

    }

    } catch (e) {

    throw new Error(e)

    }

    if (match) {

    ctx.session.user = {

    _id: user._id,username: user.user,nickname: user.nickname,role: user.role

    }

    console.log(ctx.session)

    return (ctx.body = {

    success: true,data: {

    username: user.user,nickname: user.nickname

    }

    })

    }

    return (ctx.body = {

    success: false,err: '密码错误'

    })

    })

    写到这里,整个功能流程基本完毕了,也非常的顺畅,但是对我来说一帆风顺的代码是不存在的。

    session is not defined

    问题

    在 nuxtServerInit 获取不到有关 session 的任何信息,然而其他的 api 均可获取到 session ,当时由于苦苦找不到原因,一度怀疑栗子有问题。。

    原因

    最终的问题还是因为自己的粗心,忽视了一些细节,在官网给出的栗子中:

    它将 session 保存在了 req.session,所以在 nuxtServerInit session也确实存在于 req.session ,而我使用的 Koa2 和 Koa-session , Koa-session 将 cookie 解析到了 ctx.session,它并不存在于 req.session 。

    所以在将 nuxt.render 注入的时候,将 session 添加进 request 中

    {

    await next()

    ctx.status = 200 // koa defaults to 404 when it sees that status is unset

    ctx.req.session = ctx.session

    return new Promise((resolve,promise => {

    // nuxt.render passes a rejected promise into callback on error.

    promise.then(resolve).catch(reject)

    })

    })

    })

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

    总结

    如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

    展开全文
  • 路由鉴权: 就是判断这个路由当前浏览者是否需要权限访问。一般我是通过判断cookie中存储的token来判断的。在middleware文件夹下新建“auth.js”的文件在当前auth.js文件内判断cookie中是否包含token字段import ...
  • nuxt设置路由鉴权

    2020-08-12 09:48:28
    1.在根目录下创建middleware文件夹,在该文件夹下创建两个文件 authenticated.js【未登录跳转登录页】 export default function ({ store, redirect }) { // If the user is not authenticated ...
  • 后台管理页面需要有登录系统,所以考虑做一下路由鉴权,这篇文章主要介绍了nuxt框架中路由鉴权之Koa和Session的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Nuxt应用中,有时候会遇到需要身份验证的路由模块。比如,有些模块页面,需要登录后才能访问。如果读者熟悉Vue Router,那么实现起来就简单多了。和Vue Router一样,也是使用before_each路由守卫。具体实现代码如下...
  • 文章目录使用vuex在刷新后保持状态配置自己的路由 及 路由鉴权keepalive 使用vuex在刷新后保持状态 1.安装 yarn add vuex-persistedstate 2.配置 先在 plugins下新建 localStorage.js import createPersistedState ...
  • nuxt框架中路由鉴权——Koa和Session

    千次阅读 2018-05-07 03:33:27
    博客的后台管理页面需要有登录系统,所以考虑做一下路由鉴权,实现方式也是 Nuxt 官网给出栗子来改写,顺便也将前后端路由给统一了。 路由拦截 前端方面主要通过利用 Nuxt 的中间件来做路由拦截,这里也是需要 Vuex...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 180
精华内容 72
关键字:

nuxt路由鉴权