状況
現在vuexのgettersにcheckメソッドというのがありそこに認証済みか否かの状態をtrueかfalseで持っています。
( stateのuserはデフォルトではnullが入っておりログインした場合にだけユーザーのデータが入る仕様になっております )
※バックエンドはLaravelにて制作しております
store
1const state = { 2 user: null 3}; 4 5const getters = { 6 check: state => !! state.user, 7}; 8 9const mutations = { 10 setUser (state, user) { 11 state.user = user 12 } 13}; 14const actions = { 15 async login (context, data) { 16 await context.commit('setUser', data) 17 } 18};
そのcheckメソッドの値を参照して仮にfalseの状態で'/login'以外のページにアクセスされた場合は'/login'に移動させたくて下記の様にしました
routerJS
1router.beforeEach((to, from, next) => { 2 //ログインしていない場合 3 if (store.getters['auth/check'] === false) { 4 if (to.path == '/login') { 5 next() 6 } 7 else { 8 next('/login'); 9 } 10 11 } 12}); 13 14export default router
これで制限をかけることには成功したのですが新たな問題が一つ発生しまして、下記の様にログインに成功した場合先程のstoreにて
state.userの情報を更新しgetters.checkがtrueになりその後'/home'に遷移するようにしたいのですがこのページ遷移までも
ガードされてしまいます。。
loginVue
1 data() { 2 return { 3 email: '', 4 password: '', 5 } 6 }, 7 methods: { 8 login: function () { 9 const self = this; 10 11 axios.post('/login', { 12 email: this.email, 13 password: this.password, 14 }) 15 .then(function (response) { 16 self.$store.dispatch('auth/login', response.data); 17 self.$router.push('/home'); 18 }) 19 .catch(function (error) { 20 21 }); 22 }, 23 },
で自分なりに考えたんですがログインしてからgetters.checkがtrueになる前にページ遷移が発生しておりそれでガードされてしまっているのでは無いかなと考えました。
試した事
先程載せたlogin.vueをasync awaitの形で書き換えてみましたがだめでした
loginVue
1 2async login() { 3 const self = this; 4 5 const params = { 6 email: this.email, 7 password: this.password, 8 }; 9 10 try { 11 const response = await axios.post('/login', params ); 12 13 await self.$store.dispatch('auth/login', response.data); 14 await self.$router.push('/home'); 15 }catch (error) { 16 17 } 18 }
足りない情報等ありましたら追記致しますのでよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。