vue 实现token 登录

Vue 实现 Token 登录

用户登录与 Token 获取

在登录页面，用户提交表单后，向后端发送登录请求。后端验证成功后返回 Token（通常为 JWT）。

axios.post('/api/login', {
  username: 'user',
  password: '123456'
}).then(response => {
  const token = response.data.token;
  localStorage.setItem('token', token);
  router.push('/dashboard');
});

Token 存储与请求拦截

将 Token 存储在 localStorage 或 Vuex 中，并在每次请求时通过 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

在 Vue Router 的全局前置守卫中检查 Token，未登录用户跳转到登录页。

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

Token 过期处理

在 axios 响应拦截器中检查 Token 是否过期，过期时跳转到登录页或自动刷新 Token。

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    localStorage.removeItem('token');
    router.push('/login');
  }
  return Promise.reject(error);
});

退出登录处理

清除本地存储的 Token 并重定向到登录页。

logout() {
  localStorage.removeItem('token');
  this.$router.push('/login');
}