nuxtjs路由鉴权

2019-11-22T14:57:31.935 | 浏览:14 | 文章类别: 前端

路由鉴权:就是判断这个路由是否需要权限才可以访问。 一般我是通过判断cookie中存储的token来判断的。

1. 在middleware文件夹下新建“auth.js”的文件

并键入如下代码:依据token判断路由是否需要权限

import utils from '~/utils/utils'

export default function ({route, req, res, redirect}) {
  let isClient = process.client;
  let isServer = process.server;
  let redirectURL = '/order/sign_in/';
  var token, path;

  //在服务端
  if (isServer) {
    let cookies = utils.getcookiesInServer(req)
    token = cookies.token ? cookies.token : ''
  }
  //在客户端判读是否需要登陆
  if (isClient) {
    token = utils.getcookiesInClient('token')
  }

  //需要进行权限判断的页面开头
  if (!token) {
    redirect(redirectURL)
  }
}

2.新建获取cookie的文件

我这里是写在了utils/utils.js 中,(在上方代码第一行中有提现)

import Cookie from 'js-cookie'

export default {
  //获取服务端cookie
  getcookiesInServer:function (req) {
    let service_cookie = {};
    req && req.headers.cookie && req.headers.cookie.split(';').forEach(function (val) {
      let parts = val.split('=');
      service_cookie[parts[0].trim()] = (parts[1] || '').trim();
    });
    return service_cookie;
  },
  //获取客户端cookie
  getcookiesInClient:function (key) {
    return Cookie.get(key) ? Cookie.get(key) : ''
  }
}

3.在需要路由鉴权的页面中加入

比如,/home 页面需要判断权限,我们参考下方代码即可。

<script>
    export default {
        // auth 为刚才在在middleware文件夹下新建的auth.js文件
        middleware: 'auth',
    }
</script>

扩展:

npm install js-cookie --save

2.配置使用

我是在~/plugins文件下新建了 cookie.js文件

import Vue from 'Vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

3.具体使用

在第二部分中 utils.js 文件中有体现出来。 1. 引用

import Cookie from 'js-cookie'
  1. 客户端使用
// 1.获取
Cookie.get(key)
// 2.设置
Cookie.set('name', value, {expires: 过期时间})
// 3.删除
Cookie.remove("name")
// 过期时间设置:
let seconds = 3600;     // 过期时间 /秒
let expires = new Date(new Date() * 1 + seconds * 1000);