vue——前置路由守卫

路由守卫，当目标路由设置了路由守卫，如果没有做相应的验证（如登陆），无法跳转到目标路由

在路由配置中添加meta属性，属性为自定义，用于守卫判断，

注意：父路由设置了路由守卫，子路由也应该设置路由守卫，不然路由守卫会失败

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/views/home.vue'
import login from '@/views/login.vue'
import Register from '@/views/register.vue'

Vue.use(Router)
export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
      //当前路由的元数据，自定义
      meta:{
        requireAuth:true
      }
    },
    {
      path:'/login',
      name:'login',
      component:login,
      meta:{
        cheakIsLogin:true
      }
    },
    {
      path:'/register',
      name:'Register',
      component:Register,
      meta:{
        cheakIsLogin:true
      }
    }
  ]
})

在main.js入口文件中，添加守卫判断

//前置路由守卫
router.beforeEach((to,from,next)=>{
  //to 目标路由
  //from 来源
  //next 放行

  //如果需要验证，首页守卫
  if(to.meta.requireAuth){
    //vuex仓库中的信息是否存在
    if(store.getters.user.userName){
      next()
    }else{
      //拦截路由
      next('./login')
    }
  }else{//不需要验证，直接放行
    next()
  }
  //登陆、注册守卫
  if(to.meta.cheakIsLogin){
    if(store.getters.user.userName){
      // next('/')
      //路由让其返回至原来的地址
      router.back()
    }else{
      next()
    }
  }else{
    next()
  }
})