vue 项目 通过cookie判断用户是否登录?
场景描述:
在App.vue中请求用户信息并保存在vuex中
在路由拦截器中判断用户是否登录,当页面需要认证并且用户未登录,则重定向到登录页面
判断用户是否登录可以使用 token/判断用户信息是否存在
问题描述:
一般后台的token都会设置HttpOnly,这样前端就无法获取token了
而由于路由拦截器比App.vue更先执行,所以当页面刷新时,路由拦截器是获取不到用户信息的
所以这两种方法都有一定问题
请问大家平时是如何解决的?
回答:
现在很少使用 cookie
了,因为前端也会有很多业务逻辑需要使用到 token
,所以基本上都是登录接口请求完成之后会返回 token
和 过期时间
,两个值,然后前端缓存起来,比如说使用 vuex
和 localStorage
做持久化。
每次请求的时候给请求头添加上 Authorization
信息,一般都会卸载封装的 axios
请求拦截器内。
然后每次刷新的时候判断缓存当中是否已经有 token
存在,如果有则请求 token
登录接口。
最后 token
刷新机制就看后端做不做了,就不是前端管辖的部分了。
当然如果后端不做,就一定要使用 cookie
和 httpOnly
也是没问题的,按照登录接口的返回状态缓存起来就行了,cookie
信息会自动在每次请求时添加在请求头当中。然后每次刷新的时候去请求 token
登录接口看看是否登录状态过期。
回答:
存localstorage或者sessionstorage
回答:
token一般都存到本地或者会话缓存(sessionstorage)里面的,刷新页面也会一直存在。
回答:
存localstorage
回答:
既然后台设置HttpOnly
应该是防止XSS
攻击,而sessionstorage
,localstorage
虽然能解决问题但是使用它们也是容易受XSS
攻击,这样后台设置HttpOnly
就没有意义了,其实现今即使设置了HttpOnly
也同样可以通过CSRF攻击,所以这里建议的是让后端取消HttpOnly
,https
加个证书防攻击效果会更佳一些。
回答:
你的问题出在了「判断用户是否登录可以使用 token 判断用户信息是否存在」,token 存在不代表用户信息有效。
既然使用了 Cookie 做用户验证,你无需关心 Cookie 里是 Token 还是其他东西,请求接口时带上(非跨域浏览器自动,跨域设置下 withcredentials
)就可以了。
应该让后台提供一个接口来校验当前 Cookie 存储的信息是否有效,比如 api/current_user
,在路由拦截器中请求这个接口,若 401
就重定向到登录页。
回答:
前后端都要限制。
后端对进入页面后的接口请求进行权限控制,如果没权限返回特定状态码;
前端在路由跳转时候, beforeEach 里面读 vuex 的登陆信息,读不到就刷新用户信息,再存入vuex;
回答:
每一条接口不都是走网关的嘛,两个条件:
- 没有cookie
- 接口返回401
一般在接口请求时候做拦截器和router
判断cookie就可以了。
还有你说的娶不到,看是服务器自己写cookie,还是需要你自己写cookie呢。
以上是 vue 项目 通过cookie判断用户是否登录? 的全部内容, 来源链接: utcz.com/p/933600.html