vue jsでのユーザーログイン後に認証トークンを保存するにはどうすればよいですか？

Question

私はvue jsをフロントエンドとして使用していて、laravelで構築された私のappiからユーザを認証した後、その結果としてapiを認証するためのすべての要求を送るトークンを受け取っています。

しかし、どのようにしてトークンをブラウザに保存する必要がありますか？

Answer 1

あなたの質問は非常に幅広いです。だから私は一般的な答えを出すつもりです。

localStorageを使用してトークンを格納します。

localStorage.setItem('name','tokenValue'); // to store the token 
localStorage.getItem('name'); // to getthe token value 

単純なウェブ検索では、localStorageについて知っておくべきことがすべて得られます。お役に立てれば。

Answer 2

私がここで見つけたのは、localStorageがアシンクしていないためです。ログイン後、非常に悪いUXのページ全体をリフレッシュして、vueを使用してから開発したものをリフレッシュする必要があります。

私が推薦することができるのは、isteadはlocalForageです。これはassync localStorage以上のものです。それは約束に基づいており、構文はlocalStorageと非常に似ています。

例：

localforage.getItem('something', myCallback); 

そのdocsで詳細情報。

トークンをバックエンドに送信するには、vue.http.interceptorsを使用する必要があります。

例：

Vue.http.interceptors.push((request, next) => { 
    request.headers['Authorization'] = auth.getAuthHeader() 
    next((response) => { 
     if(response.status == 401) { 
     auth.logout(); 
     router.go('/login?unauthorized=1'); 
     } 
    }); 
});