Vue全局路由守卫（验证登录状态）

全局路由守卫使用

今天开发的时候，需要在跳转路由的时候，验证一下登录状态。就是在跳转路由的时候判断一下，本地缓存是否存在token。如果没有，需要用户重新登录。特此记录一下。

在main.js里面插入一下代码：

// 路由守卫

// to：即将要进入的目标 路由对象
// from：当前导航正要离开的路由
//next：放行
router.beforeEach((to, from, next) => {
    if (to.matched.length != 0) {
        if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
            if (Boolean(localStorage.getItem("token"))) { // 通过浏览器本地缓存判断当前的token是否存在
                next();
            } else {
                next({
                    path: '/login',
                    query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
                })
            }
        } else {
            if (Boolean(localStorage.getItem("token"))) { // 判断是否登录
                if (to.path != "/" && to.path != "/login") { //判断是否要跳到登录界面
                    next();
                } else {
                    /**
                     * 防刷新，如果登录，修改路由跳转到登录页面，修改路由为登录后的首页
                     */
                    next({
                        path: '/index'
                    })
                }
            } else {
                next();
            }
        }
    } else {
        next({
            path: '/login',
            query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
        })
    }
})

在登录的时候保存token

代码：

 login(){
                localStorage.setItem('token','fdfjkdfjksdfdkf');
                this.$router.push('/index')
            }

以上就是全局路由守卫验证登录状态的基本使用。