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

Question

이제 내 계정 비밀번호를 입력하면 브라우저가 요청을 보내고 토큰이 성공적으로 반환됩니다. 내가 묻고 싶은 것은 이 토큰을 쿠키에 넣어야 할까요, 아니면 localStorage에 넣어야 할까요? 그리고 다른 페이지에서 로그인 차단을 어떻게 처리해야 할까요? 쿠키나 localStorage에 토큰이 있는지 확인한 후 해제해야 합니까? ...

某草草 · Answer

사용자 인증이 성공한 후 서버에서 반환되는 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 값은 일반적으로 위조하기 어렵습니다. 🎜

PHPz · Answer

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