1.在定義路由時添加自定義字段
meta: {
requireAuth: true,
},
2.使用路由定義的鉤子函數
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
if (store.state.token) {
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath}
})
}
}
else {
next();
}
})
3. 統一處理所有http請求和響應，使用 axios 的攔截器
// http request 攔截器
axios.interceptors.request.use(
config => {
if (store.state.token) {
config.headers.Authorization = `token ${store.state.token}`
}
return config
},
err => {
return Promise.reject(err)
},
)
// http response 攔截器
axios.interceptors.response.use(
response => {
return response
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 401 清除token信息並跳轉到登錄頁面
store.commit(types.LOGOUT)
// 只有在當前路由不是登錄頁面才跳轉
router.currentRoute.path !== 'login' &&
router.replace({
path: 'login',
query: { redirect: router.currentRoute.path },
})
}
}
// console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
return Promise.reject(error.response.data)
},
)