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 passport, passport-jwt, jsonwebtokens

查看我的日志，我得到了成功的登錄響應，但隨后它嘗試獲取/auth/user並以 401（未經授權的錯誤）進行響應。 仔細閱讀 auth 庫代碼，對/auth/user的 GET req 似乎是預期的行為。

這是登錄代碼（客戶端）：

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中沒有設置token。 我不確定這是否應該存在，但認為它可能應該存在。 在我的控制台中，搜索本地存儲會產生一些字符串和大整數，但沒有提到其中的令牌。

編輯（8 個月后）

解決方案的要點（斜線替換為文件名中的破折號）： https : //gist.github.com/wcarron27/b0db7a16df9ceff924d4a75050093c55

我的登錄方法最初不起作用的原因是 localStorage 令牌設置不正確，因此無法在客戶端重定向上傳遞 getData 方法。 vue-auth 默認執行此操作。 通過編輯它在 vue-auth 配置中點擊的 url，我能夠將它定向到正確的路由（但只有在我正確設置了 localstorage 令牌之后。使用Vue.http.options.rootUrl （或其他東西，它在主目錄中） .js 文件）來設置Authorization標頭。

代碼中，你必須在客戶端main.js注冊 vue-auth ，並在Login.vue “登錄”方法中調用它。 客戶端配置將 http 調用定向到main.js的指定路由。 在回調中，用戶和令牌設置在 localStorage 和 Vuex 存儲中。

Http 請求進入 API 端並命中accounts.js.的路由accounts.js. 這條路使用中定義的護照戰略./util/passport.js ，以及在定義的setJWT功能./util/jwtLib.js 。

在此之后，客戶端被重定向到我選擇的路由，數據由我的 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
    });
  }
}