当前位置：首页 > VUE

vue jwt实现

2026-03-27 20:26:33VUE

Vue 中实现 JWT 认证

安装依赖

需要安装 jsonwebtoken 和 axios 用于生成/验证令牌和发起 HTTP 请求。通过 npm 或 yarn 安装：

npm install jsonwebtoken axios

后端配置

确保后端支持 JWT 签发和验证。常见后端框架（如 Node.js + Express）需配置：

登录接口返回 JWT

其他接口验证 JWT 有效性示例 Node.js 签发代码：

const jwt = require('jsonwebtoken');
const token = jwt.sign({ userId: user.id }, 'your_secret_key', { expiresIn: '1h' });

前端登录处理

在登录组件中，通过 axios 发送凭证并存储返回的 JWT：

axios.post('/api/login', { email, password })
  .then(response => {
    localStorage.setItem('jwt', response.data.token);
    router.push('/dashboard');
  });

请求拦截

通过 axios 拦截器自动附加 JWT 到请求头：

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

路由守卫

使用 Vue Router 的导航守卫保护受限路由：

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

令牌刷新

处理 JWT 过期时自动刷新：

vue jwt实现

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      return axios.post('/api/refresh', { token: localStorage.getItem('jwt') })
        .then(res => {
          localStorage.setItem('jwt', res.data.token);
          error.config.headers.Authorization = `Bearer ${res.data.token}`;
          return axios.request(error.config);
        });
    }
    return Promise.reject(error);
  }
);