vue router.beforeEach()詳細

outer.beforeEach()は、一般的にページへのアクセス制限に使用されます.たとえばログインしていないと、一部のページにアクセスできません.ログインしてからのみ、一部のページを表示する権限があります.のはっきり言ってルートブロックです.最初のステップでは、ルーティングにアクセスするには権限が必要かどうかを規定します.

 @/router/index.js
 import A from '@/components/a'
{
     path: '/a',
     name: 'a',
     component:	A,
     meta : {                      //      obj
   			requireAuth:true      //     true           A
     }
   },

ステップ2 vuexを使用してuserIdを1つ全体

@/assets/store.js
//  vuex   
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//      
const store = new Vuex.Store({
	state:{
		userId : ''
	}
})

export default store

ステップ3ではrouterを使用します.beforeEach()

@/main.js
  ：【
	  （                 ）{
	
		  (         userID){
			            
		}  {
			        b    
		}
		
	}                  {
	
		            
		
	}
】
    ：
import store from '@/assets/store'   //   userId    
router.beforeEach((to,from,next)=>{
	if(to.meta.requireAuth){
		if(store.state.userId){
			next()
		}else{
			next({path:'/b'})
		}
	}else{
		next()
	}
})

第4歩第3歩この/bルーティングは実はページにログインすることであり、Aページに入る前にインタフェースを要求し、ログインしたことがあるかどうかを取得し、このuserIdをvuexのstateに存在させる必要がある.userIdがない場合、ログイン後、userIdをstateに保存します.そして仕事を終わらせる