在vue 项目中全局导航守卫是干什么的？

目录

1.在router中的index.js 文件里引入vue-router实例

2.创建路由实例

3.挂载全局导航守卫

---

应用场景： 登录页面防止用户页面直接在地址栏中可以访问其他页面；

背景： 在 地址栏当中输入地址可以访问其他页面；然而我们需要一个系统当中来进行拦截；

那就是全局导航守卫来进行拦截， 用vue-Router 实例的方法来实现的；

1.在router中的index.js 文件里引入vue-router实例

import Router from 'vue-router'
Vue.use(Router)

2.创建路由实例

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home}
  ]
})

3.挂载全局导航守卫

//全局路由前置守卫 --路由拦截
router.beforeEach((to, from, next) => {
  // to  将要前往的路由
  //from 从哪个路由过来的
  //next(path) 是一个函数  表示继续执行下一步，强制执行前往的path 路由

  //如果前往login 页面  则不需要token 直接进入就可以
  if (to.path === "/login") return next();

  //获取token
  const TOKEN = window.sessionStorage.getItem("TOKEN");
  if (!TOKEN) {
    //token 不存在  name 意味着 没有进行登录  返回登录页面
    next({ path: "/login" });
  }
  //已经 存在TOKEN  name 就可以进行
  next();
});