关于前端:Vue路由守卫

本例将通过一个简略的登录后取得路由跳转权限的案例来简略解释路由守卫（全局前置守卫）
案例场景：在许多业务中咱们会遇到用户登录后能力拜访某个路由的状况(不能通过地址栏手动跳转)，这事咱们可能须要用到路由守卫。

1. 首先新建 3 个 vue, 别离为 About.vue,Home.vue 和 Index.vue。

而后在 router 中引入并在路由字典中注册：

{
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/i',
    name: 'Index',
    component: Index
  },
  {
    path: '/a',
    name: 'About',
    component:About
  }

大家能够看到三个 vue 的路由名称及 path 门路别离对应 Home.vue,Index.vue 及 About.vue
业务需要：
现假设业务需要为 Home 和 About 在任何时候都能拜访，而 Index 路由则须要登录后能力拜访

点击“去 About”能够跳转，点击“去 Index”不能跳转，点击“登录按钮”能够更改登录状态

const router = new VueRouter({
  routes,
  mode:'history'
})

new 一个 router 寄存路由字典，mode 该为 history(mode 各位随便 …)

2. 接下来咱们去到 Home.vue 中，写出登录扭转拜访路由权限的函数，当用户点击“登录按钮”时会触发该函数

<div class="home">
    <h1> 这里是 Home，登录后能力跳转到 Index</h1>
    <router-link to="/a"> 去 About</router-link><br>
    <router-link to="/i"> 去 Index</router-link><br>
    <button @click="Login"> 登录按钮 </button>
    <h2>{{logMsg}}</h2>
  </div>

这里的 logMsg 保留在 Home.vue 的 data 里，默认为 ”” 也就是不会显示，当用户点击确定后会在 h2 标签中显示“登录胜利能够跳转到 Index 了”

Login(){if(confirm("你确定要登录吗？")){
        this.logMsg = '登录胜利能够跳转到 Index 了';
        this.$store.commit("login",true);
      }else{
        this.logMsg = '登录失败'
        this.$store.commit("login",false);
      }
    }

无论确认或登录都会触发 store 里的 mutations 里的 login 函数(这里传 false 到 store 里是为了退出登录)
store 里是这样的间接扭转 isLog 的值

state: {isLog:false},
  mutations: {login(state,payload){state.isLog = payload;}
  }

这样咱们就能够将 store 里的 isLog 由 false 改为 true 或者由 true 改为 false 以取得或失去拜访 Index 的权限了。

3. 以上咱们曾经实现了更改登录辨认符号了，接下来就是具体的封堵路由和关上路由了，这里咱们须要用到 beforeEach 办法，此办法里的回调函数领有三个参数 to,from 和 next 别离代表来着要跳转到的路由的 name，来自的路由的 name 和下一步须要执行的操作(中断跳转，持续跳转或者跳转到其余路由)。

router.beforeEach((to,from,next)=>{if(to.name != 'Index'){next();
  }else if(to.name == 'Index' && $store.state.isLog){next();
  }else{next(false);
  }
})

解释下上边的代码第一个 if 后条件意思为如果要跳转到的路由的 name 不为 Index 时就继续执行跳转到须要跳转的路由（也就是说要跳转到 Index 路由就不行）。
第二个 if 后的条件的意思为如果要跳转的路由的 name 为 Index 且登录状态满足时也能够持续跳转，继续执行该跳转（也就是说 store 里的 isLog 为 true 时就能够胜利跳转到 Index 路由了）
第三个 if 其余状况中断跳转（特指想跳转去 Index 然而 store 里的 isLog 为 false 的状况）
4. 实际操作一下
在 Home 先点击 ” 去 About” 可能跳转到 About

在 Home 先点击 ” 去 Index”, 不能跳转这里就不贴图了跳转（目前的 isLog 为默认值 false 跳转会被 next(false)中断）

而后咱们点击登录按钮并对弹窗点击确定

点击登录后 mutations 里的 login 函数会将 isLon 的值改为 true，从而满足了第二个 if 判断的条件。
同时 Home.vue 会变成这样

而后咱们再点击 ” 去 Index”，就能够跳转了，跳转过来是这样的

此时咱们能够退回 Home.vue 在弹窗中点击勾销再次更改 isLog 的值来勾销拜访权限，其实因为这里的 isLog 是保留在 vuex 里的只有页面刷新 isLog 的值就会复原默认的 false, 理论需要中大家能够将 isLog 的值保留在 sessionStorage 或者 localStorage 中。