【VUE】5.路由导航守卫

1. 功能需求

　　1. 当用户登陆成功后，把得到的token存到Session Storage

　　2. components -> Form.vue , 对预验证进行校验，如果验证不正确就跳出，如果正确，就通过axios请求token接口，并且把token存入Session Storage

this.$refs.FormRef.validate(async valid => {

   if (!valid) return

   const {data:res} = await this.$http.post("token", this.Form)
　　// 把token存入session Storage

   window.sessionStorage.setItem('token', res.token)

 });

　　3. 存入token后，路由跳转到demo1

this.$refs.FormRef.validate(async valid => {

   if (!valid) return

   const {data:res} = await this.$http.post("token", this.Form)

   console.log(res)

   window.sessionStorage.setItem('token', res.token)
   // 路由跳转

   this.$router.push('/demo1')

});

　　4. 演示

　　

　　5. 例如我们登陆后直接进入了/demo1 , 当我们把token删除，自动跳转到/form ，不给访问/demo1, 但是现在事无法实现的，所以要加路由导航首位

2. 路由导航守卫

　　1. 路由导航守卫控制访问权限

　　2. 编辑index.js

// 挂载路由导航守卫

router.beforeEach((to, from, next) => {

  /**

   * to: 将要访问的路径

   * from: 从哪个路径挑战

   * next: 放行

   */

  if (to.path === '/form') return next()
  // 获取token ,如果token不存在跳转到/form

  const tokenStr = window.sessionStorage.getItem('token')

  if (!tokenStr) return next('/form')

  next()

})

export default router

　　3. 功能实现，当登陆后检查token，如果有token，则访问/demo1 如果没有则跳转到/form

项目地址：https://github.com/wangxiao9/vue_coding.git

【VUE】5.路由导航守卫的相关教程结束。