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

【问题标题】：JWT Authorization with Axios and Vue.js (Header)使用 Axios 和 Vue.js 进行 JWT 授权（标题）
【发布时间】：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 是可能的，但我真的不知道在我的示例中如何做到这一点。

【问题讨论】：

标签： javascript vue.js authorization 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 中正确设置了用户令牌，您的请求中有一个额外的标头发送到服务器。

【讨论】：