当前位置：首页 > VUE

vue 实现token登录

2026-01-18 21:32:43VUE

Vue 实现 Token 登录

登录流程设计

用户提交登录表单后，前端将用户名和密码发送到后端验证。后端验证成功后返回一个 Token，前端保存该 Token 并在后续请求中携带。

使用 Axios 拦截器在每次请求头中添加 Token：

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

Token 存储方案

将 Token 存储在本地 localStorage 或 sessionStorage 中：

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

从存储中获取 Token：

const token = localStorage.getItem('token');

路由守卫配置

在 Vue Router 中配置全局前置守卫，检查用户是否已登录：

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

退出登录处理

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

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

Token 过期处理

在响应拦截器中检查 Token 是否过期：

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

完整示例代码

登录组件示例：

<template>
  <form @submit.prevent="login">
    <input v-model="username" placeholder="Username">
    <input v-model="password" type="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        });
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('Login failed:', error);
      }
    }
  }
};
</script>