javascript - Problème de logique d'interception de connexion?

Question

Maintenant, j'entre le mot de passe de mon compte, le navigateur envoie une demande et le jeton est renvoyé avec succès ;

Ce que je veux demander, c'est : dois-je mettre ce jeton dans un cookie ou dans localStorage ?

De plus, comment gérer l'interception de connexion sur d'autres pages ?

Est-il nécessaire de déterminer s'il y a un token dans le cookie ou localStorage puis de le libérer ?
(Si c'est le cas, d'autres peuvent simplement créer un jeton et le laisser partir)

Et comment utiliser le délai d'attente pour un retour réussi ? Est-il placé dans le cookie ?

Ou est-ce que ma pensée est fausse ?

Answer 1

Une fois l'authentification de l'utilisateur réussie, la valeur token renvoyée par le serveur est généralement stockée dans localStorage sur le front-end.
Chaque fois que vous faites une demande, placez simplement le jeton dans l'en-tête de la demande.
Ce qui suit prend axios comme exemple : 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 rrreee

L'interception de connexion de la page prend comme exemple vue-router de vue.js : 🎜 rrreee

---

🎜De plus, la valeur du token est généralement difficile à falsifier, car chaque requête va vérifier la validité de la valeur du token auprès du backend. 🎜

Answer 2

Il est recommandé d'utiliser setCookie dans la requête renvoyée par le serveur pour définir le jeton, et de le définir sur httpOnly. Apportez des cookies dans les requêtes suivantes, puis déterminez l'état en fonction du rappel du serveur.