nuxt.js 在middleware（中间件）中实现路由鉴权


路由鉴权： 就是判断这个路由当前浏览者是否需要权限访问。
一般我是通过判断cookie中存储的token来判断的。

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

在当前auth.js文件内判断cookie中是否包含token字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import getCookie from '~/utils/getCookie'

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

  // 在服务端
  if (isServer) {
    // 获取服务端cookie
    let cookies = getCookie.getcookiesInServer(req)
    // 获取当前服务端cookie中是否含有token字段
    token = cookies.token ? cookies.token : ''
  }
  // 在客户端
  if (isClient) {
    // 获取客户端（本地）cookie中的token字段
    token = getCookie.getcookiesInClient('token')
  }

  // 判断是否获取到token
  // 未获取到，重定向到登陆页面
  if (!token) {
    redirect(redirectURL)
  }
}

新建获取cookie的文件

1
～/uitls/getCookie.js

首先：下载js-cookie
npm i js-cookie -s

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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) : ''
  }
}

在需要路由鉴权的page页面中使用

比如在 ～/page/index.vue中使用

1
2
3
4
5
6
7
<script>
    export default {
        name: 'index',
        // auth 为刚才在在middleware文件夹下新建的auth.js文件
        middleware: 'auth',
    }
</script>

js-cookie 扩展

1.安装js-cookie

npm install js-cookie --save

2.使用

  1. 引用
    import Cookie from 'js-cookie'

  2. 客户端使用

1
2
3
4
5
6
7
8
9
// 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);