java无感知重启_基于OAuth2.0的token无感知刷新

目前手头的vue项目关于权限一块有一个需求，其实架构师很早就要求我做了，但是由于这个紧急程度不是很高，最近临近项目上线，我才想起，于是赶紧补上这个功能。这个项目是基于OAuth2.0认证，需要在每个请求的头部携带access_token，如果这个access_token过期，需要利用已有的refresh _token去重新获取一个access_token，如果连这个refresh_token也过期了，那就是真正的过期了，需要退出登录页面。refresh_token在获取新的access_token的时候需要让用户无感知，也叫无痛刷新。

这里的代码实现肯定是要在axios拦截器里写的，但是是在请求拦截器里写还是在响应拦截器里写还是有区别的：

1.写在请求拦截器里：每次请求之前都会先请求一个checkToken的接口，来确认这个access_token是否过期，如果没有过期，直接就发起原本的请求，如果过期，利用已有的refresh _token去重新获取一个access_token之后，再发起原本的请求。但是这样写有个缺点，就是每次请求之前都要额外请求一次checkToken的接口，如果网速不好，会给用户造成不好的体验，而且对服务器造成了性能上的浪费。

2.写在响应拦截器里：直到access_token过期，返回401未授权，才利用已有的refresh _token去重新获取一个access_token。

最后我和后端讨论了下，最后采用了第二种方法，把checkToken放在后端，前端无感知刷新写在响应拦截器里。

这里写的一个响应拦截器：

import axios from 'axios'

//创建一个axios实例

const service = axios.create({

timeout: 5000, // 请求超时时间

withCredentials:true //表示跨域请求时是否需要使用凭证. 默认为false

})

var loading;//遮罩层

// 响应拦截器

service.interceptors.response.use(

response => {

//do what you like

},

error => {

loading.close();

if (error && error.response) {

switch (error.response.status) {

case 400:

error.message = '请求错误'

break

case 401:

return doRequest(error);

case 403:

error.message = '拒绝访问'

break

case 404:

error.message = 请求地址出错: ${error.response.config.url}

break

case 408:

error.message = '请求超时'

break

case 500:

error.message = '服务器内部错误'

break

case 501:

error.message = '服务未实现'

break

case 502:

error.message = '网关错误'

break

case 503:

error.message = '服务不可用'

break

case 504:

error.message = '网关超时'

break

case 505:

error.message = 'HTTP版本不受支持'

break

default:

break

}

}

errorLog(error)

return Promise.reject(error)

}

)

export default service

可以看到在响应拦截器的错误回调函数里401值的时候调用了一个方法doRequest()；

async function doRequest (error) {

try {

const data = await getNewToken();

var token=data.data.token_type+' '+data.data.access_token;

sessionStorage.setItem('RequestToken',token);

const res = await service.request(error.config)

return res;

} catch(err) {

Message({

message: '登录会话已过期，请重新登录',

type: 'error',

duration: 5 * 1000

})

sessionStorage.clear();

router.replace({

path:"/login"

});

return err;

}

}

这里的重点这些请求必须是同步的，同步的，同步的，重要的事情说三遍，而axios默认是异步的，所以你要么使用ES6的async/await语句，要么使用then回调函数，必须保持是同步的。而getNewToken()则是利用refresh_token重新获取access_token方法。算了，一并贴出，仅作参考。

import qs from 'qs'

async function getNewToken() {

var refreshToken=sessionStorage.getItem('refreshToken');

return await axios({

url: '/OAuth/oauth/token',

method: 'post',

headers: {

'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',

'Content-Type':'application/x-www-form-urlencoded'

},

data:qs.stringify({

grant_type:'refresh_token',

refresh_token : refreshToken

})

})

}

下面看效果。为了效果，这里设置了access_token有效时间为5s，refresh _token有效时间为10s。动图是这样的：

一步一步分解下，登录的时候，获取到access_token和refresh _token。然后带着access_token：f0a3******cb64去访问menuQuery接口是可以正常请求的。

但是之后，我等了超过5s后(不超过10s，这个时候access_token已过期，refresh _token未过期)发了一个对0304接口的请求，这个时候返回401未授权，说明access_token：f0a3******cb64已过期。

这时利用refresh_token重新获取access_token。

可以看到返回了一个新的access_token：8332******1c8a，于是带着这个新的access_token重新发起对0304接口的请求，这个时候就可以返回所需要的数据。

之后再等超过5s，这个时候access_token过期了，refresh _token也过期了。动图是这样的：

这时的请求返回的是400，而不是401了，这说明refresh _token：826b******17d1过期了。这个时候就该退出登录界面，重新登录了。

最后，放一个总的效果图：

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[基于OAuth2.0的token无感知刷新]http://www.zyiz.net/tech/detail-126074.html