Apabila saya log masuk dengan pengguna ia mengubah hala saya ke papan pemuka seperti yang dijangkakan. Sebaik sahaja saya log keluar dan cuba log masuk semula (walaupun dengan pengguna lain dan tanpa menyegarkan halaman) ia mengembalikan ralat ini dalam konsol:
Saya hanya mahu mengubah hala pengguna dalam papan pemuka jika disahkan, walaupun halaman itu tidak dimuat semula, kerana saya perasan bahawa jika saya memuat semula halaman, saya boleh log masuk tanpa sebarang masalah.
Tolong bantu saya jika anda boleh. Berikut ialah beberapa kod:
Kaedah log masuk
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); } }); }, },
Laluan papan pemuka dalam penghala
{ path: '/dashboard', name: 'dashboard', component: DashboardComponent, beforeEnter: (to, from, next) => { if (!store.getters['auth/authenticated']) { return next({ name: 'home' }) } next() } },
Cuba lakukan operasi dalam storan 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) } },
Lain-lain daripada 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 }, },
Kemas kini: Anda perlu menunggu sebelum memanggil
attempt()
的调用,否则this.$router.push({ name: 'dashboard' })
(因此/dashboard
路由上的守卫函数)将被调用在对/api/user
API untuk melengkapkan:next
adalah fungsi yang sepatutnya dipanggil sekali ( tidak dikembalikan).Cuba tukar kod dalam penghala anda kepada: