vue无感刷新页面的做法

### 实现无感刷新页面的最佳实践

在 Vue.js 应用程序中实现无感刷新页面的关键在于处理好 token 的自动更新机制。通过合理的设计可以确保用户体验流畅，同时保障安全性。

#### 利用响应拦截器进行 Token 自动刷新

一种推荐的方式是在 HTTP 请求的响应拦截器内完成此操作。每当接收到由于 token 过期而导致的身份验证错误时，在发送新请求之前尝试获取最新的访问令牌[^1]。这种方式不需要频繁轮询服务端来保持 session 活跃状态，从而减少了不必要的网络流量开销并提高了效率。

axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        const originalRequest = error.config;

        if (error.response.status === 401 && !originalRequest._retry) {
            originalRequest._retry = true;
            
            // 调用刷新token接口
            return axios.post('/auth/refresh-token', { refreshToken: localStorage.getItem('refreshToken') })
                .then(res => {
                    if (res.data.accessToken) {
                        localStorage.setItem('accessToken', res.data.accessToken);
                        
                        // 更新当前请求头中的Authorization字段
                        originalRequest.headers['Authorization'] = 'Bearer ' + res.data.accessToken;
                        
                        // 重新发起原请求
                        return axios(originalRequest);
                    }
                });
        }

        return Promise.reject(error);
    }
);

这种方法不仅解决了因 token 失效而造成的未授权问题，还能够有效防止因为客户端时间和服务器时间不同步所引发的一系列潜在风险。

#### 存储 Refresh_Token 并安全使用

当用户首次成功登录后，除了常规的 access_token 外还需要获得 refresh_token，并将其妥善存储起来以便后续用于换取新的 access_token[^2]。需要注意的是，为了提高系统的安全性，应该采取适当措施保护这些敏感数据免受攻击者的窃取或篡改。