vue jwt 前端如何续期

要在Vue前端中实现JWT（JSON Web Token）的续期，可以采取以下步骤：1、使用定时器定期检查JWT的有效期；2、在JWT快过期时，调用API请求新的JWT；3、将新的JWT存储在本地存储中；4、在每次API请求时附带最新的JWT。这些步骤可以确保用户在不需要重新登录的情况下，能够继续使用应用。

一、JWT续期的基本原理

JWT是一种常用的认证机制，包含了用户的身份信息和签名，通常在用户登录时由服务器生成并发送给前端。JWT有一个有效期（expiration time），在此时间之后JWT会失效。因此，为了保持用户的持续登录状态，需要在JWT快过期时进行续期。

二、前端定时检查JWT有效期

首先，我们需要在前端定时检查JWT的有效期。可以使用JavaScript的setInterval函数来定期执行检查任务：

function checkTokenExpiry() {
  const token = localStorage.getItem('jwtToken');
  if (token) {
    const payload = JSON.parse(atob(token.split('.')[1]));
    const expiryTime = payload.exp * 1000;
    const currentTime = new Date().getTime();
    if (expiryTime - currentTime < 60000) { // 如果在1分钟内过期
      refreshJWT();
    }
  }
}
setInterval(checkTokenExpiry, 30000); // 每30秒检查一次

三、请求新的JWT

当检测到JWT即将过期时，需要向服务器发送请求以获取新的JWT：

async function refreshJWT() {
  try {
    const response = await axios.post('/api/refresh-token', {
      token: localStorage.getItem('jwtToken')
    });
    if (response.data.token) {
      localStorage.setItem('jwtToken', response.data.token);
    }
  } catch (error) {
    console.error('Error refreshing JWT:', error);
    // 可以在这里处理重新登录逻辑
  }
}

四、更新本地存储中的JWT

在获取新的JWT后，需要将其存储在本地存储（localStorage）中，以便后续请求使用：

localStorage.setItem('jwtToken', response.data.token);

五、在每次API请求中附带JWT

为了确保每个API请求都附带最新的JWT，可以在Vue项目中使用Axios的请求拦截器：

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('jwtToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

六、实例说明

假设我们有一个Vue项目，在项目中使用Vuex来管理状态，下面是一个完整的实现示例：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    token: localStorage.getItem('jwtToken') || ''
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      localStorage.setItem('jwtToken', token);
    },
    clearToken(state) {
      state.token = '';
      localStorage.removeItem('jwtToken');
    }
  },
  actions: {
    async refreshToken({ commit }) {
      try {
        const response = await axios.post('/api/refresh-token', {
          token: localStorage.getItem('jwtToken')
        });
        commit('setToken', response.data.token);
      } catch (error) {
        console.error('Error refreshing JWT:', error);
        commit('clearToken');
        // 可以在这里处理重新登录逻辑
      }
    }
  }
});
// main.js
import Vue from 'vue';
import store from './store';
import axios from 'axios';
axios.interceptors.request.use(
  config => {
    const token = store.state.token;
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
new Vue({
  store,
  render: h => h(App)
}).$mount('#app');
// 定时检查JWT有效期
function checkTokenExpiry() {
  const token = localStorage.getItem('jwtToken');
  if (token) {
    const payload = JSON.parse(atob(token.split('.')[1]));
    const expiryTime = payload.exp * 1000;
    const currentTime = new Date().getTime();
    if (expiryTime - currentTime < 60000) {
      store.dispatch('refreshToken');
    }
  }
}
setInterval(checkTokenExpiry, 30000); // 每30秒检查一次

七、总结和建议

在Vue前端中实现JWT续期的关键步骤包括定时检查JWT有效期、请求新的JWT、更新本地存储中的JWT以及在每次API请求中附带JWT。通过这些步骤，可以确保用户在JWT过期前自动续期，从而提供无缝的用户体验。

建议在实现JWT续期机制时，注意以下几点：

确保服务器端提供安全可靠的刷新令牌API。
考虑使用更安全的存储方式，如HttpOnly的Cookie来存储JWT。
定期检查和更新前端代码，以应对潜在的安全漏洞。

通过遵循这些最佳实践，可以有效提升应用的安全性和用户体验。

相关问答FAQs：

1. 前端如何获取并保存JWT令牌？

在Vue前端应用中，可以使用Axios或其他HTTP请求库来向后端发送登录请求。当用户成功登录后，后端会返回一个JWT令牌。前端需要将该令牌保存在本地，通常可以使用浏览器的本地存储（如localStorage或sessionStorage）来保存令牌。

// 登录请求示例
axios.post('/login', { username, password })
  .then(response => {
    const token = response.data.token;
    // 将令牌保存在本地存储中
    localStorage.setItem('token', token);
  })
  .catch(error => {
    console.error(error);
  });

2. 如何在前端实现JWT令牌的续期？

JWT令牌通常具有一定的有效期，一旦过期，就需要重新向后端请求新的令牌。为了实现令牌的续期，前端可以在每次发送请求时检查令牌的过期时间，并在接近过期时自动向后端请求新的令牌。

// 发送请求前检查令牌是否过期
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    const decodedToken = jwt_decode(token);
    const currentTime = Date.now() / 1000;
    // 如果令牌剩余有效时间不足10分钟，向后端请求新的令牌
    if (decodedToken.exp - currentTime < 600) {
      return axios.post('/refreshToken')
        .then(response => {
          const newToken = response.data.token;
          localStorage.setItem('token', newToken);
          config.headers.Authorization = `Bearer ${newToken}`;
          return config;
        });
    }
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

3. 如何处理令牌续期过程中的错误？

在令牌续期的过程中，可能会遇到一些错误，例如网络请求失败、后端返回错误等。为了处理这些错误，前端可以在令牌续期的拦截器中添加错误处理逻辑。

axios.interceptors.response.use(response => {
  return response;
}, error => {
  const originalRequest = error.config;
  // 如果请求返回401错误（令牌过期），尝试刷新令牌并重新发送请求
  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true;
    return axios.post('/refreshToken')
      .then(response => {
        const newToken = response.data.token;
        localStorage.setItem('token', newToken);
        originalRequest.headers.Authorization = `Bearer ${newToken}`;
        return axios(originalRequest);
      });
  }
  return Promise.reject(error);
});

通过以上方法，前端可以实现JWT令牌的续期，确保在令牌过期前能够自动获取新的令牌，避免用户需要手动重新登录。

文章标题：vue jwt 前端如何续期，发布者：不及物动词，转载请注明出处：https://worktile.com/kb/p/3631502