axios 요청 차단, 응답 차단,router 내비게이션 수위

7178 단어 학습 노트Vue.js
axios 요청 차단: 요청 헤더에 token 등을 통일적으로 추가할 수 있습니다
axios.interceptors.request.use(
  function (config) {
  // vuex 
    let user = store.state.userForm;
    if (user) config.headers.Authorization = `Bearer ${user.token}`;
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
)

axios 응답 차단: 로그인 판단
// : ,
axios.interceptors.response.use(function (response) {
  //  
  return response;
}, function (error) {
  //  , 
  Vue.prototype.$message.error(' ');
  router.push('/login');
  return Promise.reject(error);
});

내비게이션 선행 수위beforeEach: 로그인 여부를 판단할 수 있지만, 응답으로 차단하는 것이 좋다
//to: 
//from: 
//next: , , 
router.beforeEach((to,from,next)=>{
	if(to.path!= '/login') {
		let user = window.sessionStorage.getItem('user');
		if(user){
		// 
			next();
		}else {
		// login
			next('/login');
		}
	}else {
		next();
	}
})

내비게이션 후방 수위: afterEach
router.afterEach((to,from)=>{
})
  • before Each와 after Each는 전역 내비게이션 수위로 라우터에서 사용됩니다
  • before Route Leave는 구성 요소 내의 내비게이션 수위로 이 구성 요소의 대응 경로를 떠날 때 호출됩니다
  • 좋은 웹페이지 즐겨찾기