管理杂谈OA答疑ERP答疑教程搜索

【HTML】前端跳转如何携带Token?


在前端项目中,登录成功后获取Token值,然后在后续的请求中都需要在请求头中携带这个Token,这是一种常见的做法。这种情况下,你可以选择使用LocalStorage或者SessionStorage来存储Token。

  1. 「LocalStorage」:这是HTML5提供的一种在客户端存储数据的方式,数据会永久保存,除非用户手动清除。你可以在登录成功后,将Token存储到LocalStorage中。
localStorage.setItem('token''your token');

然后在每次发送请求时,都从LocalStorage中获取Token,并添加到请求头中。

let token = localStorage.getItem('token');
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
  1. 「SessionStorage」:与LocalStorage类似,SessionStorage也是HTML5提供的一种在客户端存储数据的方式。但是SessionStorage中存储的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并在浏览器关闭时结束。如果你希望在用户关闭浏览器后,Token被清除,可以选择使用SessionStorage。

存储Token:

sessionStorage.setItem('token''your token');

获取Token并添加到请求头中:

let token = sessionStorage.getItem('token');
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

注意:以上的代码示例使用了axios库来发送HTTP请求,如果你使用的是其他库,比如fetch,设置请求头的方式可能会有所不同。

另外,存储Token时要注意安全问题,避免XSS攻击。


更多精彩文章浏览...
点击右上角图标分享到朋友圈
官方网站:http://www.clicksun.cn
咨询热线:400-186-1886
服务邮箱:service@clicksun.cn