简单的路由守卫

最新推荐文章于 2024-02-14 03:38:40 发布

原创最新推荐文章于 2024-02-14 03:38:40 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在 Vue 项目中实现路由的权限控制。通过在路由配置中添加 `meta` 字段，设置 `isLogin` 来标识是否需要登录。在路由守卫中，检查目标路由的 `meta.isLogin`，如果为真，则判断用户是否已登录，未登录则重定向到登录页面；反之，允许用户访问。这种方式确保了只有登录用户才能访问特定的受保护路由。

需要在配置路由时给路由添加meta，如下：

component:'组件',
meta:{
  isLogin:true
}

// 路由守卫
router.beforeEach((to, from, next) => {
    // console.log(to)
    if (to.matched.some(res => res.meta.isLogin)) { //判断是否需要登录
        if (jsCookie.get('AdminToken')) {
            next();
        } else {
            next({
                path: "/",
                query: {
                    redirect: to.fullPath
                }
            });
        }
    } else {
        next()
    }
});