【HTML】前端跳转如何携带Token?
|
admin
2024年4月9日 22:51
本文热度 495
|
在前端项目中,登录成功后获取Token值,然后在后续的请求中都需要在请求头中携带这个Token,这是一种常见的做法。这种情况下,你可以选择使用LocalStorage或者SessionStorage来存储Token。
- 「LocalStorage」:这是HTML5提供的一种在客户端存储数据的方式,数据会永久保存,除非用户手动清除。你可以在登录成功后,将Token存储到LocalStorage中。
localStorage.setItem('token', 'your token');
然后在每次发送请求时,都从LocalStorage中获取Token,并添加到请求头中。
let token = localStorage.getItem('token');
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
- 「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攻击。
该文章在 2024/4/9 22:51:42 编辑过