Vue.js 2 身份验证 JWT

Question

[帖子已编辑：答案见下文]

我正在尝试使用此样板文件 https://github.com/vuejs-templates/webpack 制作 Vue.js2 应用程序

我被困在身份验证过程中，使用这个库：https://github.com/websanova/vue-auth 并尝试使用 JWT 作为身份验证方法。以前从来没有推出过自己的身份验证，我有点迷茫。

我安装的可能相关的软件包：passport, passport-jwt, jsonwebtokens、passport-local, passport-local-mongoose

查看我的日志，我得到了成功的登录响应，但随后它尝试获取 /auth/user 并以 401（未经授权的错误）响应。仔细阅读 auth 库代码，/auth/user 的 GET 请求似乎是预期的行为。

这里是登录代码（客户端）：

methods: {
  login() {
    this.$auth.login({
      body: this.data.body
      success(res) {
        console.log('Success: '+this.context);
        this.localStorage.setItem('auth-token', res.body.token);
      },
      error(res) {
        console.log("Error: " + this.context);
        this.error = res.data;
      },
      rememberMe: true,
      fetchUser: true
    });
  }
}

这里是相应的服务器端代码：

• 已删除链接 |请参阅编辑部分 *

我可以肯定的是： 服务器实际上创建了一个在登录请求期间有效的 JWT（在 jwt.io 上检查）。之后似乎没有在任何地方设置它。它只是坐在那里然后死去。响应中提到了 Authorization Bearer 标头，我确定没有设置。我也不明白在哪里或如何做到这一点。登录请求后，localStorage 中没有设置令牌。我不确定这是否应该存在，但认为它可能应该存在。在我的控制台中，搜索本地存储会产生一些字符串和大整数，但其中没有提及令牌。

修改（8 个月后）

此处的解决方案要点（文件名中的斜线替换为破折号）： https://gist.github.com/wcarron27/b0db7a16df9ceff924d4a75050093c55

我的登录方法最初不起作用的原因是 localStorage 令牌设置不正确，因此无法在客户端重定向上传递 getData 方法。 vue-auth 默认执行此操作。通过编辑它在 vue-auth 配置中命中的 url，我能够将它定向到正确的路由（但只有在我正确设置了 localstorage 令牌之后。使用Vue.http.options.rootUrl（或其他东西，它位于 main.js 文件中）要点）来设置Authorization 标头。

在代码中，你必须在客户端main.js注册vue-auth，并在Login.vue“login”方法中调用它。客户端配置将 http 调用定向到 main.js 中的指定路由。在回调中，用户和令牌设置在 localStorage 和 Vuex 存储中。

Http reqs 到 API 端并命中accounts.js. 中的路由，该路由使用./util/passport.js 中定义的护照策略，以及./util/jwtLib.js 中定义的 setJWT 函数。

在此之后，客户端被重定向到我选择的路由，并且数据由我的 store 和 ajax 调用填充。请记住，虽然这应该可以解决登录问题，但我还没有验证代码的正确性，因为基本上我需要发布整个两个单独的代码库。

此外，这不考虑刷新错误。状态在刷新时被丢弃，所以不要依赖 vuex 来持久化。不过，localStorage 和 vuex 的组合可以解决问题。

Answer 1

我没有验证这一点，但是，从第 7 行的代码中删除“this”会起到神奇的作用吗？

methods: {
  login() {
    this.$auth.login({
      body: this.data.body
      success(res) {
        console.log('Success: '+this.context);
        // original code here --> this.localStorage.setItem('auth-token', res.body.token);
        localStorage.setItem('auth-token', res.body.token);
      },
      error(res) {
        console.log("Error: " + this.context);
        this.error = res.data;
      },
      rememberMe: true,
      fetchUser: true
    });
  }
}