面试题70：Vue 中路由导航守卫的介绍及使用

路由导航守卫是为了路由跳转之前做的检查及操作
比如：用户没有登录 而是直接通过修改浏览器 url 来访问网页，这种操作无疑是不安全的。路由导航守卫可以让我们对用户要跳转的路由做一次检查，符合条件后放行，不符合条件则强制用户跳转登录页面。

代码如下：

//在路由对象上 挂载路由导航守卫
router.beforeEach((to,from,next) => {
  //to 将要访问的路径
  //from 代表从哪个路径跳转过来
  //next 是一个函数，表示放行
  //  1.next() 放行   2.next('/login') 强制跳转到login

  if(to.path === '/login') return next();//如果用户访问登录页，直接放行
  const tokenStr = window.sessionStorage.getItem('token')//获取token
  if(!tokenStr) return next('/login')//如果没有token 则强制登录
  next()//如果用户携带了 token 则放行
}) 

  路由守卫是路由在跳转前、后过程中的一些钩子函数，这些函数可以让你操作一些其他的事，在后台管理中设置权限时经常看到，在实现路由跳转前校验是否有权限，有权限就可以通过，反之就会被执行其他操作，如返回首页。

路由守卫分为：全局守卫，组件守卫，路由独享

#路由守卫参数：

to：目标路由对象

from：即将要离开的路由对象

next()：放行

守卫作用

当我们路由切换到一个组件里面，如果没有权限，不让进入，有权限可以进入

组件内部守卫

1.beforeRouteEnter(to,from,next)
当进入组件前 执行函数
// to 去哪个路由
// from 从哪个路由
// next() true 允许进入 / false 不允许 / '/user' 进入user地址
// beforeRouteEnter守卫不能访问this，通过 `vm` 访问组件实例 next(vm=>{})
2.beforeRouteLeave(to,from,next)
当离开组件前 执行函数
3.beforeRouteUpdate(to,from,next)
当组件更新的时候  

路由独享组件

beforeEnter(to,from,next)

全局守卫
组件内部，独享，都是对某一个组件起作用，对每一个组件都能守卫到

const router = new Router();
export default router;
// 每个页面都守卫，按需守卫
// 路由meta信息 requireAuth（需要权限） 页面才守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    console.log("我要进入到", to.name);
    // 判断是否登录
    if (isLog) {
      next(true)
    } else {
      // 如果没有登录跳转login 后面加一个条件redirect 等于要去的页面的地址 （方便登录成功后返回原页面）
      next('/login?redirect=' + to.path)
    }
  } else {
    next();
  }
})

路由包含的信息$route
// fullpath 全地址
// path 路由地址
// params 路由的参数
// query 问号后查询的参数
// name 路由名称
// meta 路由元信息，标识路由是否需要全局守卫