VueJSでログインした後にユーザーを取得するには

Question

私は、プロジェクト内でaxiosとvue-resourceの両方を使用します。私はvue-resourceで始まり、ポストではうまくいかなかったので、私はログインのポストのためにAxiosを使いました。

私はvuejsを使い慣れていないため、ログイン後にユーザーを取得する方法がわかりません。 Logginはコンポーネントでヘッダーにはログインしているユーザーの名前を入れたい別のコンポーネントです

ヘッダーコンポーネントでログインした後にそのユーザーを取得する方法はありますか？もしあなたが私に言いたいことがあればどうぞ。または、もっとコードを提供する必要がある場合は教えてください。ログインコンポーネントで

ログイン方法

login() { 
    axios.post('/login', this.user) 
    .then ((response) => { 
     AuthPlugin.getToken(response.data); 
     alertify.success("Success! You are now logged in."); 
     this.$http.get("/user", this.user) 
     .then((response) => { 
     this.$router.push('/home'); 
     }) 
    }) 
     .catch(function (error) { 
     alertify.error('Invalid User'); 
    }); 
} 

私はあなたはユーザー詳細情報を格納し、ローカルストレージ/クッキーとしてトークンができ

<div class="dropdown dropdown-navbar-btn-wrapper"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     <i class="ti-user"></i> The Login User <i class="ti-angle-down"></i> 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
     <a class="dropdown-item" href="#">My account</a> 
     <a class="dropdown-item logout-btn" href="#" @click.prevent="logout"><i class="ti-power-off"></i> Log out</a> 
    </div> 
</div> 

Answer 1

質問した内容でイベントバスを使用することをお勧めします。 main.jsデータ

data() { 
    return { 
     username: '', 
    } 
} 

および方法にイベントバス

import { eventBus } from './main'; 

を使用ヘッダで

export const EventBus = new Vue(); 

を追加で

onUser() { 
    eventBus.$on('loggedInUser', (user) => { 
     // see how you get this object to get the user.username 
     this.username = user; 
    }) 

console.log（user）を実行すると、パスワードも表示されます。次に、このユーザーに関する詳細を知りたい場合は、usersテーブルと$ http.get（/ users）を持っていると仮定して、ユーザーとループを作り、ログインしたユーザーのユーザー名。

自動的

created() { 
    this.onUser(); 
} 

を実行するために作成し、ログインで今

<button><i class="ti-user"></i> {{username}} <i class="ti-angle-down"></i></button> 

にログインしているユーザーのユーザー名がときに呼び出すことが二つの機能のためのハンドラを作るここに持つことができますそれを追加します。クリックを押します。

<a @click="handler">Login</a> 

あなたがメソッドの一部に続いて入力

data() { 
    return { 
     user: { 
     username: '', 
     password: '' 
     } 
    } 
} 

から取得したユーザとデータを追加します（ハンドラを作る）とemitUser（）を使用しているプラ​​グイン

emitUser() { 
    eventBus.$emit('loggedInUser', this.user); 
}, 
handler() { 
    this.login(); 
    this.emitUser(); 
} 

Answer 2

でログインしているユーザーを入れたいヘッダーコンポーネント。 次に、関数を使用してユーザーの詳細を取得します。

Vue JWT Authもご覧ください。