全局路由守卫使用场景:控制页面登录,权限控制。
- 当用户未登录的情况下,都是跳转登录页面;
- 当用户没有权限时,进入无权限页面;
vue-router v4.版本
详细查看官网:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import HomeView from "../views/HomeView.vue";
const routes: Array<RouteRecordRaw> = [
{
path: "/home",
name: "home",
component: HomeView,
},
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
},
{
path: "/login",
name: "login",
component: () => import("../views/LoginPage.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
router.beforeEach((to, form, next) => {
console.log("beforeEach", to, form);
const obj = sessionStorage.getItem("userInfo") || "{ }";
const userInfo = JSON.parse(obj);
// 判断是否登录
if (Object.keys(userInfo).length) {
console.log("go");
next();
} else {
if (to.fullPath === "/login") {
next();
} else {
next("/login");
}
}
});
export default router;
vue-router v3.版本
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import { Role_List } from "./common/constant";
Vue.use(Router);
const router = new Router({
routes: [
{
path: "/",
name: "home",
component: Home,
meta: {
role: []
}
}
]
});
router.beforeEach((to, form, next) => {
const userInfo = localStorage.getItem("userInfo") || {};
const routerRoleList = to.meta.role || []; //当前路由具有权限角色list
if (typeof userInfo.roleId === "number") {
//当前角色信息
const currentRoleObj = Role_List.filter(v => v.value === userInfo.roleId)[0];
if (routerRoleList.includes(userInfo.roleId)) {
next();
} else {
const defaultPath = currentRoleObj.defaultPath;
next(defaultPath);
}
} else {
//用户接口获取失败时重定向home页
if (["/"].includes(to.fullPath)) {
next();
} else {
next("/");
}
}
});
export default router;