路由鑑權: 就是判斷這個路由當前瀏覽者是否需要權限訪問。
一般我是通過判斷cookie中存儲的token來判斷的。
在middleware文件夾下新建“auth.js”的文件
在當前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)
}
}
新建獲取cookie的文件
~/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頁面中使用
比如在 ~/page/index.vue中使用
<script>
export default {
name: 'index',
// auth 爲剛纔在在middleware文件夾下新建的auth.js文件
middleware: 'auth',
}
</script>
js-cookie 擴展
1.安裝js-cookie
npm install js-cookie --save
2.使用
-
引用
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);