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

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

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

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


回答:

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

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


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


回答:

存localstorage或者sessionstorage


回答:

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


回答:

存localstorage


回答:

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


回答:

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

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

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


回答:

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


回答:

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

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

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

以上是 vue 项目 通过cookie判断用户是否登录? 的全部内容, 来源链接: utcz.com/p/933600.html

回到顶部