Vue中使用JWT身份基本步骤-会生成一个-同时确保在生产环境中使用HTTPS来保护JWT的安全传输

作者：机器人技术佬 | 发布时间：2025-07-08 |

Vue中使用JWT身份验证的四个基本步骤

一、获取JWT

第一步是获取JWT。当用户登录或注册时，他们会提交用户名和密码到服务器。服务器验证这些信息后，会生成一个JWT并返回给客户端。以下是一个使用Axios库获取JWT的示例代码：

// 请求用户登录信息
axios.post('/api/login', {
  username: 'user',
  password: 'pass'
}).then(response => {
  // 服务器返回JWT
  const token = response.data.token;
});

二、存储JWT

获取到JWT后，需要将其存储在客户端。通常我们会在本地存储（如localStorage或cookies）中存储JWT，以便在后续请求中使用。以下是将JWT存储在localStorage中的示例代码：

// 将JWT存储在localStorage
localStorage.setItem('jwt', token);

三、在请求中使用JWT

在发送API请求时，需要将JWT包含在请求头中，以便服务器可以验证你的身份。可以在Axios实例中设置请求拦截器来自动添加JWT到每个请求的头部：

// 设置请求拦截器
axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${localStorage.getItem('jwt')}`;
  return config;
});

四、验证JWT

服务器需要验证每个请求中的JWT，以确保请求是合法的。以下是一个使用Node.js和Express在服务器端验证JWT的示例：

// 服务器端验证JWT
const jwt = require('jsonwebtoken');

app.use((req, res, next) => {
  const token = req.headers.authorization;
  if (token) {
    jwt.verify(token, 'your-secret-key', (err, decoded) => {
      if (err) {
        return res.status(401).json({ message: 'Unauthorized' });
      }
      req.user = decoded;
      next();
    });
  } else {
    res.status(401).json({ message: 'No token provided' });
  }
});

总结和建议

使用JWT进行身份验证的步骤如下：

  1. 获取JWT：通过用户登录或注册，从服务器获取JWT。
  2. 存储JWT：将JWT存储在本地存储中。
  3. 在请求中使用JWT：在每个API请求中，将JWT包含在请求头中。
  4. 验证JWT：在服务器端验证JWT，确保请求的合法性。

为了更好地管理和使用JWT，可以考虑使用Vuex来存储和管理JWT，并实现自动刷新Token的机制。同时，确保在生产环境中使用HTTPS来保护JWT的安全传输。