简单的路由守卫

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需要在配置路由时给路由添加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()
    }
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值