登录拦截逻辑问题？

Question

现在我输入账号密码，浏览器发送请求，成功返回了token；想问的是：这个token我是放在cookie里好还是localStorage好呢?还有就是其他页面的登录拦截怎么处理？是判断cookie或者localStorage里有token就放行吗？（如果是，别人随便造一个token也可以放行了啊）还有成功的返回的超时时间是怎么用，是放在cookie里面吗？还是我的思路是错的？

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 值的有效性。