vue实现token

Vue 中实现 Token 认证的方法

在 Vue 中实现 Token 认证通常涉及前端与后端的交互，包括 Token 的获取、存储、发送和刷新等操作。以下是具体实现步骤：

获取 Token

用户登录时，向后端发送用户名和密码，后端验证成功后返回 Token。可以使用 Axios 发送 POST 请求：

axios.post('/api/login', {
  username: 'user',
  password: 'password'
})
.then(response => {
  const token = response.data.token;
  localStorage.setItem('token', token); // 存储 Token
})
.catch(error => {
  console.error('登录失败:', error);
});

存储 Token

Token 通常存储在本地存储（localStorage）或 Vuex 中。localStorage 适合持久化存储，而 Vuex 适合全局状态管理。

// 存储到 localStorage
localStorage.setItem('token', token);

// 存储到 Vuex
store.commit('setToken', token);

发送 Token

在后续请求中，需要在请求头中携带 Token。可以通过 Axios 的请求拦截器自动添加：

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

验证 Token

每次路由跳转时，检查 Token 是否存在或有效。可以通过 Vue Router 的全局前置守卫实现：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.meta.requiresAuth && !token) {
    next('/login');
  } else {
    next();
  }
});

刷新 Token

Token 过期时，可以通过刷新 Token 接口获取新的 Token。在响应拦截器中处理：

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    return axios.post('/api/refresh-token', {
      refreshToken: localStorage.getItem('refreshToken')
    })
    .then(response => {
      localStorage.setItem('token', response.data.token);
      error.config.headers.Authorization = `Bearer ${response.data.token}`;
      return axios(error.config);
    });
  }
  return Promise.reject(error);
});

清除 Token

用户退出登录时，清除本地存储的 Token：

localStorage.removeItem('token');
store.commit('clearToken');
router.push('/login');

通过以上步骤，可以在 Vue 中实现完整的 Token 认证流程。