TA貢獻1804條經驗 獲得超3個贊
用戶認證成功后，服務端返回的 token 值，前端一般存在 localStorage 里。
每次發出請求的時候，把該 token 放在請求頭即可。
下面以 axios為例：
// http request 攔截器
api.interceptors.request.use(config => {
if (window.localStorage.ACCESS_TOKEN) {
config.headers.Authorization = 'Bearer ' + window.localStorage.ACCESS_TOKEN
}
return config
}, error => {
return Promise.reject(error)
})
// http response 攔截器
api.interceptors.response.use(response => {
if (response.status === 401) { // token過期
window.localStorage.removeItem('ACCESS_TOKEN')
router.replace({
path: '/user/login',
query: {
redirect: router.currentRoute.fullPath
}
})
}
return response
}, error => {
return Promise.reject(error)
})
頁面的登錄攔截以 vue.js 的 vue-router 為例：
// 導航鉤子
router.beforeEach((to, from, next) => {
// 檢查登錄狀態
store.commit(types.CHECKOUT_LOGIN_STATUS)
if (to.matched.some(record => record.meta.requiresAuth)) { // 判斷該路由是否需要登錄權限
if (window.localStorage.ACCESS_TOKEN) { // 如果本地存在 access_token，則繼續導航
next()
} else {
if (name === 'userLogin') {
next()
} else {
next({ // 登錄成功后，自動跳轉到之前的頁面
path: '/user/login',
query: {
redirect: to.fullPath
}
})
}
}
} else {
next()
}
})
另外 token 值一般是很難偽造的，因為每次請求都會向后端去驗證該 token 值的有效性。
舉報