vue-router路由拦截实现将未登录请求跳转到登录页面

Web前端 潘老师 2周前 (10-12) 116 ℃ (0) 扫码查看

我们在使用vue-router开发前端项目时,经常需要保证有些页面不需要登录就可以访问,但有些页面必须登录后才能访问,那我们该如何才能方便地实现这样的需求呢?其实,使用vue-router中的路由拦截可以轻松实现一些收保护的页面如果在未登录状态下被请求访问,可以直接跳转到登录页面。

我们实现如上需求只需要两个步骤:

1)在router目录下的index.js文件中创建VueRouter实例代码中,对于需要登录后才能访问的路由配置中新增meta配置,案例代码如下:

// 4、创建VueRouter实例-路由对象
const router = new VueRouter({
    // 5、配置路由
    //5.1配置路模式
    mode:"history",
    // 5.2 配置路由对象数组
    routes: [
        //登录路由
        {
            name:"Login",
            path:"/login",
            component:()=>import("@/components/Login.vue")
        },
        //主页路由
        {
            name:"Home",
            path:"/home",
            component:()=>import("@/components/Home.vue"),
            //新增meta配置
            meta:{
                //需要登录后才能访问
                requiresAuth:true
            }
        }
    ]
})

2)使用vue-router的钩子函数beforeEach实现路由拦截,我们只需要创建VueRouter实例代码后面新增如下代码:

//路由拦截
router.beforeEach((to, from, next) => {
    //判断是否是登录保护路由
    if (to.matched.some(record => record.meta.requiresAuth)) {
        //验证浏览器本地存储是否有token(或从vuex、Cookie中获取,依据自己的存储),用于判断是否登录
        if (!localStorage.token) {//没有token,表示未登录,则重定向到login
            next({
                //这里是你登录页面的路由名称,或直接使用 path:'/login'
                name: 'Login',
                query: { redirect: to.fullPath }
            })
        } else {
            next()
        }
    } else {
        // 确保一定要调用 next()
        next()
    }
})

完成以上两个步骤,去测试访问/home路由如果没登录会直接重定向到/login,如果已登录,则会正常访问,在此就不做演示了。


版权声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
喜欢 (3)
请潘老师喝杯Coffee吧!】
分享 (0)
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填【保密】)
  • 网址