前端面试题无感刷新token
时间: 2023-11-07 15:58:40 浏览: 166
这道题涉及到前端中的认证和授权问题,以及如何在前端中处理 token 刷新的问题。
认证和授权是指用户在访问系统资源时需要进行身份验证和权限验证。前端通常会在用户登录后返回一个 token,然后在每次请求时将 token 带上,服务端会通过 token 来判断用户是否有权限访问资源。
在使用 token 进行认证和授权时,由于 token 有一定的有效期限制,因此需要在 token 过期前进行刷新。在前端中可以通过定时器来定时检查 token 的有效期,当 token 即将过期时,发送一个刷新 token 的请求,获取新的 token,然后将新的 token 存储在本地,同时更新请求头中的 token。
以下是一个示例代码:
```javascript
// 定义定时器,每隔一段时间检查 token 是否即将过期
let timer = setInterval(() => {
let token = localStorage.getItem('token')
let expiredTime = localStorage.getItem('expiredTime')
if (new Date().getTime() > expiredTime - 60000) { // token 即将过期
refreshToken(token)
}
}, 1000)
// 刷新 token 的函数
function refreshToken(token) {
// 发送请求获取新的 token
axios.post('/refreshToken', {token: token})
.then(res => {
// 更新本地存储的 token 和过期时间
localStorage.setItem('token', res.data.token)
localStorage.setItem('expiredTime', new Date().getTime() + res.data.expiresIn * 1000)
// 更新请求头中的 token
axios.defaults.headers.common['Authorization'] = 'Bearer ' + res.data.token
})
}
```
需要注意的是,当用户退出登录时,需要及时清空本地存储的 token 和过期时间,并停止定时器。
```javascript
function logout() {
localStorage.removeItem('token')
localStorage.removeItem('expiredTime')
clearInterval(timer)
}
```
总之,前端刷新 token 的主要思路就是定时检查 token 的有效期,当即将过期时发送一个刷新 token 的请求,获取新的 token,然后更新本地存储的 token 和过期时间,并更新请求头中的 token。
阅读全文