vue 项目 通过cookie判断用户是否登录？

Question

场景描述：
在App.vue中请求用户信息并保存在vuex中
在路由拦截器中判断用户是否登录，当页面需要认证并且用户未登录，则重定向到登录页面
判断用户是否登录可以使用 token/判断用户信息是否存在

问题描述：
一般后台的token都会设置HttpOnly，这样前端就无法获取token了
而由于路由拦截器比App.vue更先执行，所以当页面刷新时，路由拦截器是获取不到用户信息的
所以这两种方法都有一定问题

请问大家平时是如何解决的？

Answer 1

现在很少使用 cookie 了，因为前端也会有很多业务逻辑需要使用到 token，所以基本上都是登录接口请求完成之后会返回 token 和 过期时间，两个值，然后前端缓存起来，比如说使用 vuex 和 localStorage 做持久化。
每次请求的时候给请求头添加上 Authorization 信息，一般都会卸载封装的 axios 请求拦截器内。

然后每次刷新的时候判断缓存当中是否已经有 token 存在，如果有则请求 token 登录接口。
最后 token 刷新机制就看后端做不做了，就不是前端管辖的部分了。

---

当然如果后端不做，就一定要使用 cookie 和 httpOnly 也是没问题的，按照登录接口的返回状态缓存起来就行了，cookie 信息会自动在每次请求时添加在请求头当中。然后每次刷新的时候去请求 token 登录接口看看是否登录状态过期。

Answer 2

存localstorage或者sessionstorage

Answer 3

token一般都存到本地或者会话缓存（sessionstorage）里面的，刷新页面也会一直存在。

Answer 4

存localstorage

Answer 5

既然后台设置HttpOnly应该是防止XSS攻击，而sessionstorage，localstorage虽然能解决问题但是使用它们也是容易受XSS攻击，这样后台设置HttpOnly就没有意义了，其实现今即使设置了HttpOnly也同样可以通过CSRF攻击，所以这里建议的是让后端取消HttpOnly，https加个证书防攻击效果会更佳一些。

Answer 6

你的问题出在了「判断用户是否登录可以使用 token 判断用户信息是否存在」，token 存在不代表用户信息有效。

既然使用了 Cookie 做用户验证，你无需关心 Cookie 里是 Token 还是其他东西，请求接口时带上（非跨域浏览器自动，跨域设置下 withcredentials ）就可以了。

应该让后台提供一个接口来校验当前 Cookie 存储的信息是否有效，比如 api/current_user，在路由拦截器中请求这个接口，若 401 就重定向到登录页。

Answer 7

前后端都要限制。
后端对进入页面后的接口请求进行权限控制，如果没权限返回特定状态码；
前端在路由跳转时候， beforeEach 里面读 vuex 的登陆信息，读不到就刷新用户信息，再存入vuex；

Answer 8

每一条接口不都是走网关的嘛，两个条件：

1. 没有cookie
2. 接口返回401
   一般在接口请求时候做拦截器和router判断cookie就可以了。

还有你说的娶不到，看是服务器自己写cookie，还是需要你自己写cookie呢。