先摆出 官方文档

Q：路由守卫有何用？

A：路由守卫可以实现许多功能，例如鉴权，登录状态校验，页面显示状态等等...全局配置可极大程度减少工作量，并且极大提高代码维护性...

如何实现？

实现路由守卫主要使用 vue-router提供的几个钩子函数 router.beforeEach(全局前置守卫)、router.beforeResolve(全局解析守卫)、router.afterEach(全局后置钩子) 来实现

参考示例

路由配置
const routes = [
    {
        path: "/",
        name: "home",
        component: () => import("@/views/HomeView.vue"),
        meta: { isAuth: false, title: "首页" },
    },
    {
        path: "/login",
        name: "login",
        component: () => import("@/views/account/login"),
        meta: { isAuth: false, title: "登录" },
    },
    {
        path: "/center",
        name: "center",
        component: () => import("@/views/account/center"),
        meta: { isAuth: true, title: "个人中心" },
    },
];

const router = new VueRouter({
    routes,
});
全局前置守卫
// isAuth(是否需要鉴权)
router.beforeEach((to, from, next) => {
    // 需要鉴权
    var token = userStore.getters.getUserInfo.token; // 获取token
    if (to.meta.isAuth) {
        if (token) {
            console.log('isLogin')
            // 已登录，放行
            next();
        } else {
            console.log('not token')
            next({ path: "/login" });
        }
    } else {
        console.log('do not isauth')
        //不需要鉴权
        next();
    }
});
全局解析守卫
router.beforeResolve(async to => {
    if (to.meta.requiresCamera) {
        try {
            await askForCameraPermission()
        } catch (error) {
            if (error instanceof NotAllowedError) {
                // ... 处理错误，然后取消导航
                return false
            } else {
                // 意料之外的错误，取消导航并把错误传给全局处理器
                throw error
            }
        }
    }
})
全局后置钩子
// 全局后置钩子
router.afterEach(to => {
    // 设置站点title
    document.title = "FishMailBox - " + to.meta.title;
})
文章目录