vueでのルーティングの簡単な検証token

876 ワード

前言
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();
  }
})