使用 Axios 和 Vue.js 进行 JWT 授权（标题）

Posted 2023-03-10

【中文标题】使用 Axios 和 Vue.js 进行 JWT 授权（标题）

【英文标题】：JWT Authorization with Axios and Vue.js (Header)

【发布时间】：2019-06-13 03:39:10

【问题描述】：

我对网络开发还是很陌生，所以如果解决方案很明显或者我的问题被问得不好，我提前道歉。

所以：我想使用 JWT 来验证我的用户。我使用 axios、vue.js，当然还有 JWT。我想访问安全路线：

router.post('/secureroute', checkAuth, (req, res) => 
res.status(200).json(
    message: 'all ok'
)
);

为了做到这一点，我使用了这个check-auth.js：

const jwt = require('jsonwebtoken');

module.exports = (req, res, next) => 
 try 
    const token = req.headers.authorization.split(" ")[1];
    console.log(token);
    const decoded = jwt.verify(token, process.env.SECRET_KEY);
    next();
 catch (error) 
    return res.status(401).json(
        message: 'Auth failed'
    )


next();

我的 Login.vue 的一部分：

methods: 
 login() 
  if (!this.username) this.alertUsername = true;
  if (!this.password) this.alertPassword = true;

  axios
    .post("/user/login", 
      username: this.username,
      password: this.password
    )
    .then(res => 
      localStorage.setItem("usertoken", res.data.token);
      if (res.data.token) 
        console.log("Success");
        router.push( name: "start" );
       else 
        this.alertWrong = true;
      
      this.username = "";
      this.password = "";
    )
    .catch(err => 
      console.log(err);
    );
  this.emitMethod();

使用带有授权标头的邮递员，一切似乎都正常。但是经过几个小时的互联网搜索和尝试，我根本不知道如何让它与真实的网站一起使用。我想将 JWT 作为授权标头传递。我知道使用 axios 是可能的，但我真的不知道在我的示例中如何做到这一点。

【参考方案1】：

您已经获得了登录流程，并且您将 usertoken 作为 usertoken 密钥存储在 localStorage 中。如果设置了授权标头，您还验证了您的请求得到了正确处理。

处理 api 请求的最简单方法是对 axios 进行更多抽象，自动添加授权令牌，并可能预处理您返回的响应。例如，您可能希望全局而不是逐个处理一些错误，或者希望将请求转换为始终相同的内容。

您首先要进行一些抽象，调用axios.request。您可以将配置对象传递给它，如here 所述。现在对您来说最重要的是 headers 键值对，但您可能希望在未来扩展它。

export default request (config) 
  const userToken = window.localStorage.getItem('usertoken');

  const requestConfig =  ...config ;
  if (!requestConfig.headers) 
    requestConfig.headers = ;
  

  if (userToken) 
    requestConfig.headers.authorization = `Bearer $userToken`;
  

  return axios.request(requestConfig);

现在我们可以对此进行扩展：

export default post (url, data = , config = ) 
  return request(
    ...config,
    method: 'POST'
    url,
    data
  );

在您的开发者控制台中检查请求时，您现在应该看到，如果在 localStorage 中正确设置了用户令牌，您的请求中有一个额外的标头发送到服务器。