vue 实现token 登录

安装依赖

确保项目中已安装 axios 和 vue-router。若未安装，可通过以下命令安装：

npm install axios vue-router

配置axios拦截器

在 src 目录下创建 utils/http.js 文件，配置请求和响应拦截器，自动携带 token 并处理 token 过期：

import axios from 'axios';

const http = axios.create({
  baseURL: 'https://your-api-domain.com/api',
});

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

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

export default http;

登录逻辑实现

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

import http from '@/utils/http';

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    async handleLogin() {
      try {
        const res = await http.post('/login', this.form);
        localStorage.setItem('token', res.data.token);
        this.$router.push('/dashboard');
      } catch (error) {
        alert('登录失败');
      }
    },
  },
};

路由守卫配置

在 src/router/index.js 中配置全局前置守卫，保护需要认证的路由：

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/views/Login.vue';
import Dashboard from '@/views/Dashboard.vue';

Vue.use(Router);

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

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

export default router;

登出功能实现

在需要登出的地方清除 token 并跳转至登录页：

methods: {
  handleLogout() {
    localStorage.removeItem('token');
    this.$router.push('/login');
  },
}

注意事项

• Token 存储：使用 localStorage 存储 token 需注意 XSS 风险，敏感项目可改用 httpOnly cookies。
• HTTPS：确保生产环境使用 HTTPS 传输 token。
• 刷新 Token：若后端支持 token 刷新，可在拦截器中实现自动刷新逻辑。