javascript - 로그인 차단 논리 문제가 있습니까?

Question

이제 계정 비밀번호를 입력하면 브라우저가 요청을 보내고 토큰이 성공적으로 반환됩니다. 제가 묻고 싶은 것은: 이 토큰을 쿠키에 넣어야 할까요, 아니면 localStorage에 넣어야 할까요?

그리고 다른 페이지에서 로그인 차단을 처리하는 방법은 무엇인가요?

쿠키나 localStorage에 토큰이 있는지 확인하고 해제해야 하나요?

(그렇다면 다른 사람들이 토큰을 만들어 그냥 놔두어도 됩니다)

그리고 성공적인 반품을 위한

타임아웃 기간

을 어떻게 사용하나요? 아니면 내 생각이 잘못된 걸까요?

Answer 1

사용자 인증이 성공한 후 서버에서 반환되는 token 값은 일반적으로 프런트엔드의 localStorage에 저장됩니다.
요청할 때마다 요청 헤더에 토큰을 넣으세요.
다음은 axios를 예로 들어 설명합니다. 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 으아악

페이지의 로그인 차단은 vue.js의 vue-router를 예로 사용합니다: 🎜 으아악 🎜또한 각 요청이 백엔드에 대한 token 값의 유효성을 확인하므로 token 값은 일반적으로 위조하기 어렵습니다. 🎜

Answer 2

서버에서 반환한 요청에서 setCookie를 사용하여 토큰을 설정하고, 후속 요청에서 쿠키를 가져온 다음 서버의 콜백을 기반으로 상태를 확인하는 것이 좋습니다.