全局路由守卫

最新推荐文章于 2024-02-02 16:44:03 发布

原创最新推荐文章于 2024-02-02 16:44:03 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

全局路由守卫专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中设置全局路由守卫。首先，需要在router的index.js文件中导入vue和vueRouter。接着，定义并声明路由地址。最后，详细讲解了如何实现全局路由守卫，以实现页面跳转前的控制逻辑。

在router文件中找到index.js这个文件!
第一步.导入vue文件和vueRouter文件!

import Vue from 'vue'
import VueRouter from 'vue-router'

第二步下面是设置路由地址!

const routes = [{
    path: '',//路由地址!
    name: 'login',//路由地址名字!
    component: resolve => require(["这个路由地址加载的vue组件!"], resolve),
    meta: {
        keepAlive: false
    }
}]

第三步把设置的路由地址重新声明为router!

const router = new VueRouter({
    routes
})

第四步,设置全局路由守卫!

router.beforeEach((to, from, next) => {
//to, from, next参数的意思分别to即将要进入的目标 路由对象,from当前导航正要离开的路由,next 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
const isLogine = localStorage.getItem("token");//把本地存储的token声明为isLogine!
    if (to.name == 'login'|| isLogine) {//如果即将进入的路由name等于login或者本地存储有token!顺利往下进行!
        next()
    } else {
    //否则清空本地存储,路由跳回为/的路由地址!
      localStorage.clear()
      router.push("/")
    }
})