php jwt jquery,请教 JWT 的 Token 本地储存和前端请求问题

新手使用Dingo API和JWT开发一个手机网站,按照着DingoAPI和jwt的GitHub wiki文档在做,后台已经实现API的调用,在浏览器地址栏里面带上Token参数请求受保护的资源时,也可以获取到资源,但是在前端实现上遇到较多问题,请教有经验的大牛指导一下。

1、使用jwt时,用户登录成功,获取到一个token值,要保存到客户端本地以便调用时使用,看了很多Github上的例子,都要使用到AngularJS或VUE框架,将token保存到local storage,但我没学过AngularJS,感觉看起来有些费劲,不知道有没有什么更简单的解决方案,也希望能推荐一些较好的代码例子来参考一下。

2、每次GET获取一个URI的时候,JWT的文档介绍有两种方式,一是在浏览器地址栏里面带上token参数,这样在地址栏可见不太好,二是将用bearer token附加到请求的header里面,如果前端用了AngularJS,是可以支持把token附加到header里面,但是我原有的网站都是用jQuery和Ajax的方法发起请求,如果用AngularJS,还要写很多js代码,不知道有没有什么简单的方法实现调用API时,自动附带上Token。

3、token过期之后,怎样去refresh token,刷新的策略该如何设计,我还看过一种说法是用旧的token去换取新的token,但不是很理解这个过程。

4、OAuth2和jwt之间应该如何选择,是两者能否同时使用,还是只选其一?我的理解是API资源受JWT的保护,假如要做社交登录,就需要OAuth验证,验证之后,还是获得一个JWT token,用于访问API资源,不知道这样理解对不对,求介绍两者之间应该怎么选择。

前端让每次请求都自动携带JWT(JSON Web Token令牌发送到后端,你可以采取以下几个步骤: 1. **设置头部信息**: - 在发起HTTP请求时,确保将JWT作为`Authorization`头的一部分。例如,使用Bearer模式,你的请求头会看起来像这样: ``` Authorization: Bearer <your_jwt_token> ``` 2. **客户端包装库**: - 使用前端库如axios(JavaScript)、fetch(原生)或jQuery AJAX,它们都有设置headers的功能。在发送每个API请求时,添加默认的Authorization header。 3. **浏览器存储**: - 可以选择将token存储在浏览器的localStorage或sessionStorage中,这样在跨页面请求时,可以自动获取并带上。不过请注意,这可能会暴露敏感信息,所以仅适用于同源策略允许的情况下。 4. **身份验证中间件** (如果使用的是服务端框架): - 在Node.js(Express、Koa)、Spring Boot等后端框架中,可以在全局设置的身份验证中间件里,从请求头中解析JWT,并将其注入到请求上下文中,以便后续处理。 5. **跨域设置**: - 如果应用涉及跨域请求,确保后端服务器设置了正确的CORS策略,允许来自前端的`Authorization`头携带。 6. **刷新机制**: - 考虑JWT的有效期,当接近过期时,前端应当发起刷新请求,更新新的JWT。 7. **客户端代码示例** (使用axios): ```javascript axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('jwtToken'); ``` 记得在实际生产环境中,确保对用户的操作权限、安全性和隐私有足够的保护措施。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值