javascript - 登錄攔截邏輯問題？

問題描述

現在我輸入賬號密碼，瀏覽器發送請求，成功返回了token；

想問的是：這個token我是放在cookie里好還是localStorage好呢?

還有就是其他頁面的登錄攔截怎么處理？

是判斷cookie或者localStorage里有token就放行嗎？（如果是，別人隨便造一個token也可以放行了啊）

還有成功的返回的超時時間是怎么用，是放在cookie里面嗎？

還是我的思路是錯的？

問題解答

用戶認證成功后，服務端返回的 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 值的有效性。

建議 通過 服務端返回的 request 中 使用 setCookie 的方式進行 token設置，并且設置為 httpOnly，后面的請求中帶上cookie，然后根據 server 的回調判斷狀態。