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

我们在使用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，如果已登录，则会正常访问，在此就不做演示了。