代码中的token,前端解析token

　　本文主要介绍了web项目开发中出现两种令牌的原因分析以及实现这两种令牌的示例代码。有需要的同学可以借鉴一下，希望能有所帮助。

目录

　　问题：

　　项目中有两个令牌，一个是2小时的限制(简称短令牌)，另一个是14天的限制(简称长令牌)。

　　为什么使用两个令牌？

　　回答：

　　1.基于安全和防止令牌泄露的考虑，服务器资源中的所有请求只能使用短令牌，并且短令牌只有2小时的限制；

　　这种方法仍然不能完全解决防止令牌泄露的问题，只是在一定程度上提高了防止令牌泄露的安全性；

　　长令牌只有一个作用，就是当短令牌过期时，用长令牌请求新的短令牌。

　　只有在这个接口中，您才能发送带有长令牌的请求。

　　2.为了提高用户体验，不一定要直接让用户退出正在操作的页面。

　　从“vue”导入Vue

　　从“axios”导入axios

　　从“vue-axios”导入VueAxios

　　从导入{ getToken，setToken }。/token

　　从导入路由器./router/index.js

　　从“vant”导入{ Toast }

　　Vue.use(VueAxios，Axios)

　　const instance=axios.create({

　　BaseURL:基址，

　　超时：100000

　　})

　　//添加请求拦截器

　　instance . interceptors . request . use(

　　功能(配置){

　　//统一添加令牌

　　getToken()(config . headers[ Authorization ]=` bearer $ { getToken()。token} `)

　　返回配置

　　},

　　功能(错误){

　　退货承诺.拒绝(错误)

　　}

　　)

　　//添加响应拦截器

　　/**

　　* 1 .如果401别的不重要。

　　* 2 .如果有令牌，则跳转到登录页面

　　* 3.try-catch使用refresh_token获取令牌，如果成功，否则refresh_token无效，跳转到登录页面。

　　* 4.保存获取的令牌，更新令牌，继续执行用户要求的操作。

　　*/

　　instance . interceptors . response . use(

　　功能(响应){

　　返回响应

　　},

　　异步函数(错误){

　　if(401===error . response . status){

　　setTimeout(console.clear()，2000)

　　if (getToken()) {

　　尝试{

　　//登录，但是短T过期。使用长T获得短T(刷新用户令牌)

　　让RES=wait axios({

　　Url:“基址/v1 _ 0/授权”，

　　方法：“PUT”，

　　标头：{ Authorization:` bearer $ { getToken()。刷新令牌}`}

　　})

　　//更新短t

　　let token=getToken()

　　token . token=RES . data . data . token

　　代币

　　//继续用户操作

　　返回实例(error.config)

　　} catch(错误){

　　//如果长T失败，跳转到登录页面。

　　Toast.fail(请先登录)

　　router.push({ path: /login })

　　}

　　}否则{

　　//未登录，跳转到登录页面。

　　Toast.fail(请先登录)

　　router.push({ path: /login })

　　}

　　}

　　退货承诺.拒绝(错误)

　　}

　　)

　　导出默认实例

　　以上是web项目开发中两个Token原因分析和示例代码的详细内容。关于web项目开发的更多信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。