javascript - 登入攔截邏輯問題？

Question

現在我輸入帳號密碼，瀏覽器發送請求，成功返回了token； 想問的是：這個token我是放在cookie裡好還是localStorage好呢? 還有就是其他頁面的登入攔截怎麼處理？ 是判斷cookie或localStorage裡有token就放行嗎？ ……

某草草 · Answer

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

PHPz · Answer

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