使用beforeEach實現權限設置,和上節用Vue-Router 的 beforeEach屬性 實現路由導航守衛用法基本一樣,知識需要在路由routers添加一個meta屬性,對用戶類型進行判斷就可以了
直接上代碼:
const router = new Router({
routes: [{
path: "/",
name: "login",
component: login
},
{
path: "/Teacher",
name: "Teacher",
meta: {
admin: true,
teacher: true,
student: false
},
component() {
return import(/* webpackChunkName: "Teacher" */ "./views/Teacher/index.vue");
},
children: [
// 這裏寫教師端的子頁面
{
path: "/Teacher/userlist",
name: "userList",
meta: {
admin: true,
teacher: true,
student: false
},
component() {
return import(/* webpackChunkName: "userList" */
"./views/Teacher/user_manage/index.vue"
);
}
}
}
}
router.beforeEach((to, from, next) => {
const cookieData = getCookie("SignInstate"); // cookie賦值給變量, 判斷登錄否
if (to.name === "login") {
if (cookieData === "true") {
// 普通判斷是否登錄
const TOKEN = JSON.parse(localStorage.dcaw_token);
if (TOKEN.role === "admin" || TOKEN.role === "teacher") {
next({
path: "/Teacher/experimentManage"
});
} else if (TOKEN.role === "student") {
next({
path: "/Student/practice"
});
}
} else {
next();
}
} else if (cookieData === "false") {
// if (to.name ==='forgetpassword') {
// next()
// } else {
next({
path: "/"
});
// }
} else {
const TOKEN = JSON.parse(localStorage.dcaw_token);
if (to.meta[TOKEN.role]) { // to 所指向的meta屬性的對應的登錄用戶類型
next();
} else {
// eslint-disable-next-line no-alert
alert("暫無訪問權限");
return;
}
}
if (localStorage.getItem("checked") === "true") {
const TOKEN = JSON.parse(localStorage.dcaw_token);
if (to.name === "login") {
if (TOKEN.role === "admin" || TOKEN.role === "teacher") {
next({
path: "/Teacher/experimentManage"
});
} else if (TOKEN.role === "student") {
next({
path: "/Student/practice"
});
}
}
}
});