當我使用使用者登入時,它會按預期將我重定向到儀表板。一旦我登出並嘗試再次登入(即使使用另一個用戶,並且不刷新頁面),它就會在控制台中返回此錯誤:
如果經過身份驗證,我只想在儀表板中重定向用戶,即使頁面未刷新,因為我確實注意到,如果刷新頁面,我可以毫無問題地登入。
如果可以的話請幫幫我。以下是一些程式碼:
登入方式
methods: { ...mapActions({ attempt: "auth/attempt", }), submit(credentials) { axios .post("http://127.0.0.1:8000/api/login", credentials) .then((res) => { // console.log(res.data); if (res.data.success) { this.attempt(res.data.token) } if (res.data.errors) { this.loginErrors = res.data.errors; } else { this.$router.push({ name: 'dashboard' }) } }) .catch((err) => { if ( err.name !== "NavigationDuplicated" && !err.message.includes( "Avoided redundant navigation to current location" ) ) { console.log(err); } }); }, },
路由器中的儀表板路徑
{ path: '/dashboard', name: 'dashboard', component: DashboardComponent, beforeEnter: (to, from, next) => { if (!store.getters['auth/authenticated']) { return next({ name: 'home' }) } next() } },
嘗試在 vuex 儲存體中執行操作
async attempt({ commit, state }, token) { if (token) { commit('SET_TOKEN', token) } // se non c'è if(!state.token) { return } try { await axios.get('http://127.0.0.1:8000/api/user') .then(res => { commit('SET_USER', res.data) }) } catch (e) { commit('SET_TOKEN', null) commit('SET_USER', null) } },
其他來自 vuex
namespaced: true, state: { token: null, form: null, }, getters: { authenticated(state) { return state.token && state.form }, user(state) { return state.form }, }, mutations: { SET_TOKEN(state, token) { state.token = token }, SET_USER(state, data) { state.form = data }, },
更新:應該等待對
attempt()
的調用,否則this.$router.push({ name: 'dashboard' })
(因此/dashboard
路由上的守衛函數)將會被呼叫在對/api/user
API 的呼叫完成之前:next
是一個應該準確呼叫的函數一次(不返回)。嘗試將路由器中的程式碼變更為: