当前位置：首页 > VUE

vue实现jwt

2026-01-13 01:58:49VUE

Vue 中实现 JWT 认证的步骤

安装依赖 需要安装 axios 用于 HTTP 请求和 jsonwebtoken 用于 JWT 解码（前端通常只需存储和发送 Token，解码更多由后端完成）。

npm install axios jsonwebtoken

登录请求与 Token 存储 在登录页面中，通过 API 请求获取 JWT Token 并存储到本地（如 localStorage 或 Vuex）。

import axios from 'axios';

export default {
  methods: {
    async login() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        });
        const token = response.data.token;
        localStorage.setItem('jwt_token', token);
        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('Login failed:', error);
      }
    }
  }
};

请求拦截器 通过 axios 拦截器自动为每个请求添加 Authorization 头。

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

路由守卫 使用 Vue Router 的导航守卫保护需要认证的路由。

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

Token 过期处理 在响应拦截器中检查 Token 是否过期（需后端返回特定状态码，如 401）。

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

注意事项

安全性：避免在客户端存储敏感信息，JWT 应通过 HttpOnly Cookie 或安全存储方式传递。
后端协作：确保后端正确配置 CORS 和 JWT 签发/验证逻辑。
刷新 Token：实现无感刷新机制，通过拦截 401 错误并尝试用 Refresh Token 获取新 Token。

示例代码结构

src/
├── utils/
│   └── auth.js       # 封装 Token 操作
├── router/
│   └── index.js      # 路由守卫配置
├── services/
│   └── api.js        # axios 实例与拦截器
└── views/
    ├── Login.vue     # 登录页面
    └── Dashboard.vue # 受保护页面

vue实现jwt