发布时间:2022-11-21 文章分类:WEB开发 投稿人:樱花 字号: 默认 | | 超大 打印

一、token是什么

Token: 访问资源的凭证。

一般用户通过用户名密码登录后,服务端会将登录凭证做数字签名,加密之后的字符串作为Token。

并在客户端后面的向服务端的请求中携带,作为凭证。

二、token一般存放在哪里?

token 在客户端一般存放于localStorage、cookie、或sessionStorage,vuex中。

1、localStorage

2、sessionStorage

将token存放在webstroage中,可以通过同域的js来访问。这样会导致很容易受到 XSS攻击,特别是项目中引入很多 第三方js类库的情况下。如果js脚本被盗用,攻击者就 可以轻易访问你的网站,webStroage作为一种储存机制,在传输过程中不会执行任何安全标准。

XSS攻击:cross-site Scripting (跨站脚本攻击) 是一种注入代码攻击。恶意攻击者在目标网站生注入script代码,当访问者浏览网站的时候通过执行注入的script代码达到窃取用户信息,盗用用户身份等。

3、存储在cookie 中

让它自动发送,不过缺点就是不能跨域

将token存放在cookie中可以指定httponly,来防止被javascript读取,也可以指定secure ,来保证token只在HTTPS下传输。缺点是不符合Restful 最佳实践,容易受到CSRF攻击。

CSRF跨站点请求伪造(Cross-Site Request Forgery),跟XSS攻击一样,存在巨大的危害性。

简单来说就是恶意攻击者盗用已经认证过的用户信息,以用户信息名义进行一些操作(如发邮件、转账、购买商品等等)。由于身份已经认证过,所以目标网站会认为操作都是真正的用户操作的。CSRF并不能拿到用户信息,它只是盗用的用户凭证去进行操作。

4、Vuex

总结:也就是说,localStorage可存储持久化的数据;sessionStorage仅限于当前窗口;vuex可存储保密性较高的数据,但刷新页面后数据会被清除.

三、token基本流程

(1)用户登陆,发送手机号码和验证码

(2)后台接收参数,查找用户,用户存在就生成token,返回给前端

(3)前端登陆成功,把token存到vuex(做持久化)

(4)使用axios拦截器,读取vuex中的token,并放入请求头

(5)请求其他接口,就会带上token

(6)后台在需要登陆的接口上,获取token,解密token获得userId,返回前端需要的数据

(7)用户在下次使用app,如果token还在有效期内,不需要重新登陆

客户端使用用户名跟密码去请求登陆,服务度段收到请求,去验证用户名和密码,验证成功后,服务端会签发一个token,再把这个token发送给客户端,客户顿收到token之后能够把它存储起来,

好比放在cookie里面或者local storage里面,客户端每次向服务端请求资源的时候须要带上服务端签发的token,服务端收到请求,而后去验证客户端请求里面带着的token,若是验证成功,以某种方式好比随机生成32位的字符串做为token,存储在服务器中,并返回token到APP,

之后APP请求时,凡是须要验证的地方都要带上该token,而后服务端验证token,成功返回所须要的结果,失败返回错误信息,从新登陆,服务器上的token设置一个有效期,每次APP请求时都要验证token和有效期。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持本站。