問(wèn)題描述

現(xiàn)在我輸入賬號(hào)密碼，瀏覽器發(fā)送請(qǐng)求，成功返回了token；

想問(wèn)的是：這個(gè)token我是放在cookie里好還是localStorage好呢?

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

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

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

還是我的思路是錯(cuò)的？

問(wèn)題解答

用戶認(rèn)證成功后，服務(wù)端返回的 token 值，前端一般存在 localStorage 里。每次發(fā)出請(qǐng)求的時(shí)候，把該 token 放在請(qǐng)求頭即可。下面以 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過(guò)期 window.localStorage.removeItem(’ACCESS_TOKEN’) router.replace({ path: ’/user/login’, query: {redirect: router.currentRoute.fullPath } }) } return response}, error => { return Promise.reject(error)})

頁(yè)面的登錄攔截以 vue.js 的 vue-router 為例：

// 導(dǎo)航鉤子router.beforeEach((to, from, next) => { // 檢查登錄狀態(tài) store.commit(types.CHECKOUT_LOGIN_STATUS) if (to.matched.some(record => record.meta.requiresAuth)) { // 判斷該路由是否需要登錄權(quán)限 if (window.localStorage.ACCESS_TOKEN) { // 如果本地存在 access_token，則繼續(xù)導(dǎo)航 next() } else { if (name === ’userLogin’) {next() } else {next({ // 登錄成功后，自動(dòng)跳轉(zhuǎn)到之前的頁(yè)面 path: ’/user/login’, query: { redirect: to.fullPath }}) } } } else { next() }})

另外 token 值一般是很難偽造的，因?yàn)槊看握?qǐng)求都會(huì)向后端去驗(yàn)證該 token 值的有效性。

建議 通過(guò) 服務(wù)端返回的 request 中 使用 setCookie 的方式進(jìn)行 token設(shè)置，并且設(shè)置為 httpOnly，后面的請(qǐng)求中帶上cookie，然后根據(jù) server 的回調(diào)判斷狀態(tài)。