Menyelesaikan ralat yang ditimbulkan oleh pengawal navigasi: "Ralat semasa mengubah hala daripada '/' ke '/papan pemuka'"
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
},
},