前言

vue中如果涉及到某些页面需要验证权限或者限制的话可以使用router/index.js和main.js中配置router.beforeEach进行中断。

router/index.js

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/home'
    },{
      path:'/home',
      component:Home
    }
    ,{
      path:'/infolist',
      name:'videolist',
      component:VideoList,
    //设置meta属性区别需要验证的页面，’root'随意
      meta:{
        root:true
      }
    }
    \\...
  ]
})

main.js

//router.beforeEach和next使用，状态存到了vuex
import router from 'router'
import vuex from 'vuex'
//...

router.beforeEach((to,from,next)=>{
  if(to.meta.root) {
    if(store.getters.token) {
      next();
    }else{
      // next({ path:'/'})
      store.commit('SHOW_LOGING')
    }
  }else{
    next();
  }
})