當我使用用戶登錄時,它會按預(yù)期將我重定向到儀表板。一旦我注銷并嘗試再次登錄(即使使用另一個用戶,并且不刷新頁面),它就會在控制臺中返回此錯誤:
如果經(jīng)過身份驗證,我只想在儀表板中重定向用戶,即使頁面未刷新,因為我確實注意到,如果刷新頁面,我可以毫無問題地登錄。
如果可以的話請幫助我。下面是一些代碼:
登錄方式
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 存儲中執(zhí)行操作
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 }, },
更新:應(yīng)該等待對 attempt()
的調(diào)用,否則 this.$router.push({ name: 'dashboard' })
(因此 /dashboard
路由上的守衛(wèi)函數(shù))將被調(diào)用在對 /api/user
API 的調(diào)用完成之前:
submit(credentials) { axios .post("http://127.0.0.1:8000/api/login", credentials) .then(async (res) => { // console.log(res.data); if (res.data.success) { await 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); } }); },
next
是一個應(yīng)該準確調(diào)用的函數(shù)一次(不返回)。
嘗試將路由器中的代碼更改為:
{ path: '/dashboard', name: 'dashboard', component: DashboardComponent, beforeEnter: (to, from, next) => { if (!store.getters['auth/authenticated']) { next({ name: 'home' }) } else { next() } } },