javascript - Logisches Problem beim Abfangen von Anmeldungen?

Question

Jetzt gebe ich mein Kontopasswort ein, der Browser sendet eine Anfrage und das Token wird erfolgreich zurückgegeben;

Was ich fragen möchte ist: Soll ich dieses Token in ein Cookie oder in localStorage legen?

Und wie gehe ich mit dem Abfangen von Logins auf anderen Seiten um?

Muss festgestellt werden, ob sich im Cookie oder im lokalen Speicher ein Token befindet, und dieser dann freigegeben werden?
(Wenn ja, können andere einfach einen Token erstellen und ihn loslassen)

Und wie nutzt man die Timeout-Periode für eine erfolgreiche Rückgabe? Wird sie im Cookie platziert?

Oder denke ich falsch?

Answer 1

用户认证成功后，服务端返回的 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 值的有效性。

Answer 2

建议 通过 服务端返回的 request 中 使用 setCookie 的方式进行 token设置，并且设置为 httpOnly，后面的请求中带上cookie，然后根据 server 的回调判断状态。