vue2.0_路由守卫——登录权限设置（ 以vue router.beforeEach()为例 ）

前言： 什么是路由守卫？

  官方的说法：

  导航守卫(路由守卫)主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的、单个路由独享的、或者组件级的。

  我方的说法：

  路由守卫是指对路由跳转前做一些验证或者说操作一些事儿，目的是为了实现某些效果。比如没有登录的情况下，就不能进入到首页或者其它页面，只有登录了之后才有权限进入。简单讲就是路由拦截 、设置权限。

讲解前：为了方便理解，我先贴一张钩子函数的执行顺序图。先讲解一下路由守卫的组成和各个钩子的理解与应用，登录权限设置放在最后。

路由守卫的分类

全局的守卫（3类）

    理解什么是全局的守卫：是指路由实例上直接操作的钩子函数，特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数。

一、全局前置守卫[ beforeEach ] ——一般用来做一些进入页面的限制（比如最后面的登录权限设置）

import router from './router'

/**守卫方法接收三个参数：
 * @param {to} 即将要进入的目标路由对象
 * @param {from} 当前导航正要离开的路由对象
 * @param {next} 执行下一步
*/
/**next函数的几种用法：
 * next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
 * next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。
 * next(false): 中断当前的导航。
 * next(error): 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
*/
router.beforeEach((to, from, next) => {
   
    document.title = to.meta.title || '全城购';
    if (to.meta.needLogin && !$store.state.isLogin) {
   
      next({
   
        path: '/login'
      })
    }
    else {
   
      next()
    }
  })

注意：要确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

举例：

//错误例子
router.beforeEach((to, from, next) => {
   
  if (to.name !== 'Login' && !isAuthenticated) {
   
	next({
    name: 'Login' })
  }
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})

//正确例子
router.beforeEach((to, from, next) => {
   
  if (to.name !== 'Login' && !isAuthenticated) {
   
	next({
    name: 'Login&