当前位置：首页 > VUE

vue axios 实现登录登出

2026-02-24 03:55:02VUE

安装依赖

确保项目中已安装 axios 和 vue-router（用于路由跳转）。通过以下命令安装：

npm install axios vue-router

创建 Axios 实例

在 src 目录下创建 utils/axios.js 文件，配置全局 Axios 实例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://your-api-domain.com/api', // 替换为实际 API 地址
  timeout: 5000,
});

// 请求拦截器：添加 token
instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器：处理 token 过期
instance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login'; // 跳转到登录页
    }
    return Promise.reject(error);
  }
);

export default instance;

登录功能实现

在登录组件中调用登录接口并存储 token：

import axios from '../utils/axios';

export default {
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/login', {
          username: this.username,
          password: this.password,
        });
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard'); // 跳转到主页
      } catch (error) {
        console.error('登录失败:', error);
      }
    },
  },
};

登出功能实现

在登出逻辑中清除 token 并跳转：

import axios from '../utils/axios';

export default {
  methods: {
    async handleLogout() {
      try {
        await axios.post('/logout');
        localStorage.removeItem('token');
        this.$router.push('/login'); // 跳转到登录页
      } catch (error) {
        console.error('登出失败:', error);
      }
    },
  },
};

路由守卫配置

在 src/router/index.js 中配置路由守卫，实现未登录跳转：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/login', component: () => import('@/views/Login.vue') },
    { path: '/dashboard', component: () => import('@/views/Dashboard.vue'), meta: { requiresAuth: true } },
  ],
});

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

export default router;

全局状态管理（可选）

如需集中管理登录状态，可使用 Vuex：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || null,
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      localStorage.setItem('token', token);
    },
    clearToken(state) {
      state.token = null;
      localStorage.removeItem('token');
    },
  },
});