Lorsque je me connecte avec l'utilisateur, cela me redirige vers le tableau de bord comme prévu. Dès que je me déconnecte et que j'essaye de me reconnecter (même avec un autre utilisateur et sans rafraîchir la page) cela renvoie cette erreur dans la console :
Je souhaite uniquement rediriger l'utilisateur dans le tableau de bord s'il est authentifié, même si la page ne s'actualise pas, car j'ai remarqué que si j'actualise la page, je peux me connecter sans problème.
S'il vous plaît, aidez-moi si vous le pouvez. Voici un peu de code :
Méthode de connexion
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); } }); }, },
Chemin du tableau de bord dans le routeur
{ path: '/dashboard', name: 'dashboard', component: DashboardComponent, beforeEnter: (to, from, next) => { if (!store.getters['auth/authenticated']) { return next({ name: 'home' }) } next() } },
Essayez d'effectuer des opérations dans le stockage 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) } },
Autres de 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 }, },
Mise à jour : Vous devez attendre avant d'appeler l'API
attempt()
的调用,否则this.$router.push({ name: 'dashboard' })
(因此/dashboard
路由上的守卫函数)将被调用在对/api/user
pour terminer :next
est une fonction qui doit être appelée exactement une fois ( et non renvoyée).Essayez de changer le code de votre routeur comme suit :