Question

我对Web开发还很陌生，因此如果解决方案显而易见或我的问题回答不佳，我会提前道歉。

所以：我想使用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可以实现，但是我真的不知道如何在这里的示例中做到这一点。

Answer 1

您已经拥有登录流程，并且正在将用户令牌作为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中正确设置了用户令牌，则请求中会有一个额外的标头发送给服务器。

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

1 个答案: