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

Web前端 潘老师 3年前 (2020-10-12) 4012 ℃ (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、localStorage中获取,依据自己的存储),用于判断是否登录
        if (!sessionStorage.token) {//没有token,表示未登录,则重定向到login
            next({
                //这里是你登录页面的路由名称,或直接使用 path:'/login'
                name: 'Login',
                query: { redirect: to.fullPath }
            })
        } else {
            next()
        }
    } else {
        // 确保一定要调用 next()
        next()
    }
})

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


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/1488.html
喜欢 (6)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

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

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】