Refresh Token 是一種用于長期保護 API 安全性的機制，它可以在第一次認證成功后，讓用戶只需要在過期時間內(nèi)進行 Refresh 操作就能繼續(xù)訪問 API。Vue.js 作為一種流行的前端框架，也提供了 Refresh Token 的實現(xiàn)方式。

在 Vue 中實現(xiàn) Refresh Token 需要在請求攔截器和響應攔截器中進行處理。首先需要在請求攔截器中將 Token 附加到 Headers 中，然后根據(jù) Token 的過期時間來判斷是否需要進行 Refresh 操作，如果需要則發(fā)送 Refresh 請求，更新 Token。同時，在響應攔截器中需要對返回的狀態(tài)碼進行判斷，如果是 401，則表示 Token 已過期，需要進行 Refresh 操作，否則直接返回數(shù)據(jù)。

// 請求攔截器
axios.interceptors.request.use(
config =>{
const token = localStorage.getItem('token')
if (token) {
config.headers.common['Authorization'] = `Bearer ${token}`
}
return config
},
error =>{
return Promise.reject(error)
}
)
// 響應攔截器
axios.interceptors.response.use(
response =>{
return response
},
async error =>{
const originalRequest = error.config
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true
const refreshToken = localStorage.getItem('refreshToken')
const newToken = await axios.post('/api/refreshToken', { refreshToken })
localStorage.setItem('token', newToken.data.accessToken)
return axios(originalRequest)
}
return Promise.reject(error)
}
)

在上面的代碼中，我們使用 Axios 庫的攔截器機制實現(xiàn)了 Refresh Token。同時，為了防止多次刷新 Token，我們使用了 _retry 標志來做標記，以確保 Refresh 操作只進行一次。另外，Refresh Token 的實現(xiàn)可以結(jié)合 Vuex 和路由攔截器來完成，以實現(xiàn)更細粒度的權(quán)限控制。