質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

1回答

995閲覧

vue-routerを使った認証処理時の初期表示について

tomomo

総合スコア430

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2018/06/06 08:33

認証処理が完了してない場合、ログインページに飛ばすということを行いたいです。
このようなサイトを参考に、router.beforeEachを入れてみたのですが...

javascript

1// router/index.js 2: 3 { name: 'Users', path: '/user', component: Users, meta: { requiresAuth: true }}, 4: 5router.beforeEach((to, from, next) => { 6 if (to.matched.some(record => record.meta.requiresAuth)) { 7 if (!auth.state.authenticated) { // ← ここの部分を変える必要があると思っている。 8 next({ 9 path: '/login', 10 }) 11 } else { 12 next(); 13 } 14 } else { 15 next(); 16 } 17})

リロードした際(初期表示)に、ログインページが表示されてしまいます。
一旦画面が表示されたあとは適切に遷移していることから、ユーザー情報の格納より前に判定されている(非同期)であるからなのか思っています。
このような処理を実装する場合どのようにすればいいのかヒントだけでもいただけないかと思っています。

・ユーザー認証はphp(php-jwt)で独自に実装
(firebaseを使った例はよく載っているようなのだけれども。。。)
・先のログイン情報はlocalStrageに格納している。

以下、その他のソースコード

javascript

1// 最初のスクリプト 2import http from './http'; // axiosを包括したもの 3import store from './store'; // vuex 4import router from './router'; // vue-router 5 6import App from './App.vue'; 7 8Vue.prototype.$http = http; 9 10new Vue({ 11 router, 12 store, 13 render: h => h(App), 14}).$mount('#app');

javascript

1// App.vue (必要そうなとこだけ抜粋) 2: 3 created() { 4 // 認証 (Bearer〜をdecodeされた処理結果を受け取る処理) 5 this.$http.get('auth/current').then((response) => { 6 this.$store.commit('auth/setCurrentUser', response.data); 7 }).catch((error) => { 8 console.log(error); 9 }); 10:

javascript

1// http.js (必要そうなとこだけ抜粋) 2: 3axios.interceptors.request.use((config) => { 4 Object.assign(config.headers, { 5 // 送信時に必ず付加する 6 'Authorization': `Bearer ${localStorage.getItem('user-token')}`, 7 }); 8:

javascript

1// store/modules/auth.js 2export default { 3 namespaced: true, 4 state: { 5 user: null, 6 authenticated: false, 7 }, 8 mutations: { 9 setCurrentUser(state, params) { 10 state.authenticated = true; 11 state.user = params.user; 12 if (params.hasOwnProperty('token')) { 13 localStorage.setItem('user-token', params.token); 14 } 15 }, 16 }, 17}

極力抜粋したのですが長くなりました。すみません。
よろしくおねがいします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

こちらのリポジトリの方は、ストアのウォッチャを使って「1回目の認証結果を待つ」という処理をして、ログイン後にリロードしたときログイン画面に飛ばないようにしています。

ルーターガード
https://github.com/mio3io/vue-test/blob/master/src/router/index.js

ストア
https://github.com/mio3io/vue-test/blob/master/src/store/modules/auth.js

認証関係は私も模索中なのですが、参考になれば幸いです。

投稿2018/06/06 11:42

編集2018/06/06 11:43
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomomo

2018/06/07 05:40

ありがとうございます。watchとかgetterとか知らないものがあったのですごく参考になりました。 朝から散々やっているのだけれども、恥ずかしながら解決せず。。。 回答を参考にしてみたものは認証してない場合のログイン画面が出て来ず。(storeのwatch...がだめなのかなあ。) 別解で下記みたいなのをrouterに書いてみたのは正常に動くけど、これはhttpもstoreも混在しているので、storeってコメントしてるところはstoreに移したいし。 困った。もう少し調べてみます。 ```javascript let authenticated = false; // store router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (authenticated) { // store next(); } else { $http.get('auth/current').then(() => { // store authenticated = true; // store next(); }).catch(() => { authenticated = false; // store next({ name: 'Login', query: { redirect: to.fullPath }}); }); } } else { next(); } }); ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問