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（不正エラー）で応答します。認証ライブラリコードを熟読すると、GET reqが/auth/userになると予想されます。ここで

ログインコード（クライアント側）である：

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.ioで確認）が有効であるJWTを作成しないサーバー ：私は確信していることはこれです

*編集セクションを参照してください。それ以降はどこにも設定されていないようです。ちょうどそこに座って死ぬ。回答にはAuthorization Bearerヘッダーが記載されていますが、これは設定されていません。また、これを行う場所や方法もわかりません。ログイン要求後にlocalStorageにトークンが設定されていません。私はこれが存在すべきかどうかはわかりませんが、そうすべきだと思います。私のコンソールでは、ローカルストレージを検索すると文字列と大きな整数が得られますが、そこにトークンは記述されていません。

編集（8+ヶ月後）、ここでのソリューションへ

要旨（ファイル名にダッシュで置き換えスラッシュ）： https://gist.github.com/wcarron27/b0db7a16df9ceff924d4a75050093c55

私のログイン方法は、もともと仕事しませんでした理由はのlocalStorageトークンがないということでした正しく設定されたため、クライアント側のリダイレクトでgetDataメソッドを渡すことができませんでした。 vue-authはデフォルトでこれを行います。 vue-auth configでヒットしたURLを編集することで、適切なルートに転送することができました（ただし、localstorageトークンを適切に設定した後でなければなりません）。Vue.http.options.rootUrl（または何か、要点のmain.jsファイル）Authorizationヘッダーを設定する。

コードでは、あなたがクライアント側main.jsにVUE-AUTHを登録し、Login.vue「ログイン」方法でそれを呼び出す必要があります。クライアント側の設定は、指定のHTTP呼び出しを指示しmain.jsルート。コールバックでは、ユーザとトークンがのlocalStorageとVuexストアに設定されている。

のHttp REQS API側に行くとルートが0123で定義されたパスポートの戦略を使用していることaccounts.js.にルートを打ちます、および./util/jwtLib.jsで定義されたsetJWT関数があります。

この後、クライアントは私の選択したルートにリダイレクトされ、データは私のストアとajaxコールによって読み込まれます。これはログインを解決するはずですが、基本的に2つの別々のコードベース全体を投稿する必要があったため、コードの正確性を確認していません。

さらに、これはリフレッシュエラーを考慮しません。状態はリフレッシュ時に削除されるため、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 
    }); 
    } 
}