路由鉴权: 就是判断这个路由当前浏览者是否需要权限访问。
一般我是通过判断cookie中存储的token来判断的。
在当前auth.js文件内判断cookie中是否包含token字段
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)
}
}
~/uitls/getCookie.js
首先:下载js-cookie
npm i js-cookie -s
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/index.vue中使用
<script>
export default {
name: 'index',
// auth 为刚才在在middleware文件夹下新建的auth.js文件
middleware: 'auth',
}
</script>
npm install js-cookie --save
引用
import Cookie from 'js-cookie'
客户端使用
// 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);