Déconnexion automatique dès que la page actualise

Version imprimable

12/03/2021, 15h10
tony060

Déconnexion automatique dès que la page actualise

Bonjour,

J'ai une déconnexion automatique dès que la page s'actualise, je ne comprends pas d'où cela peut venir car je n'ai rien prévu de telle . Alors je ne sais quoi présenter comme code sur mon post que j'écris, afin que vous puissiez voir. SI quelqu'un aurais une idée de où je pourrais vérifier mon code. ou quel partie du code partager afin de voir .

Merci par avance.
18/03/2021, 23h30
Séb.

Comment gères-tu ta session ?

Salut @Séb,

J'ai vu que le problème vient des intercepteurs de navigations , lorsque je commente cette partie de code , je peux actualiser sans être déconnecté. Je te montre mon code voir si tu peux me dire ou il y a une erreur. Je te remercie par avance.
Dans mon fichier : store/index.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
    authenticated: false,
 
  },
  mutations: {
    setAuthentication(state, status){
      state.authenticated = status;
    }
  },
  actions: {
  },
  modules: {
  }
})

Et voici comme il est utilisé dans mes routes

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import Vue from 'vue'
import  VueRouter  from 'vue-router'
import Home from '../views/Home.vue'
import storeSecure from '../store/index'
 
 
 
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/signup',
    name: 'Inscription',
    component: () => import('../views/Signup.vue')
  },
  {
    path: '/login',
    name: 'Connexion',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/account',
    name: 'Account',
    component: () => import('../views/Account.vue'),
    beforeEnter: (to, from, next)=>{
      if(storeSecure.state.authenticated == false){
        next()
      }else{
        next();
      }
    } 
  },
  {
    path: '/post',
    name: 'Post',
    component: () => import('../views/Post.vue'),
    beforeEnter: (to, from, next)=>{
      if(storeSecure.state.authenticated == false){
        next()
      }else{
        next();
      }
    } 
  },
  {
    path: '*',
    redirect: '/'
  },
]
 
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
 
 
export default router

salut, quand tu rafraîchis la page, ton appli recommence au début : tu crées ton store avec pour valeur authenticated à false.

tu peux au démarrage de l'appli définir authenticated à null, qui est un marqueur pour savoir si tu dois déterminer si l'utilisateur est authentifié, puis que tu mettes à jour ton store en conséquence.

par exemple...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 // ... // dans ton state, la valeur authenticated // est par défaut null state: { authenticated: null, }, // ... // Une fonction qui testés la connexion. // Idéalement, il faut interroger le serveur function initAuthenticated(){ const { authenticated } = store.state; if (authenticated !== null) { return Promise.resolve(); } return fetch('.../isAuthenticated') .then(() => true) .catch(() => false) .then((authenticated) => store.commit('setAuthentication', authenticated)) } beforeEnter(to, from, next) { initAuthenticated().then(() => { if (store.state.authenticated) { next(); } else { next('signin'); } }

20/03/2021, 12h04
tony060

Salut @gwyohm,

Merci pour ta réponse, la fonction faut la placer dans la partie router ou store ? Car j'ai essayé de la placer mais j'ai des erreurs qui s'affiche.
20/03/2021, 12h11
gwyohm

t'as quoi comme erreur ?
la fonction doit être accessible dans ton routeur
Elle doit avoir accès au store
dans le code que j'ai mis, il manque une qutoe sur l'url du fetch...

j'ai plus l erreur comme tu m'as dit la ' , j'ai comme ça comme tu m'as dit mais je peux accéder à la page :
Code router

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import Vue from 'vue'
import  VueRouter  from 'vue-router'
import Home from '../views/Home.vue'
import storeSecure from '../store/index'
import store from '../store/index'
 
function initAuthenticated(){
  const { authenticated } = store.state;
  if (authenticated !== null) {
    return Promise.resolve();
  }
  return fetch('http://localhost:3000/api/auth/user/login/isAuthenticated')
    .then(() => true)
    .catch(() => false)
    .then((authenticated) => store.commit('setAuthentication', authenticated))
}
 
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/signup',
    name: 'Inscription',
    component: () => import('../views/Signup.vue')
  },
  {
    path: '/login',
    name: 'Connexion',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/Account',
    name: 'Account',
    component: () => import('../views/Account.vue'),
    beforeEnter(to, from, next) {
      initAuthenticated().then(() => {
      if (store.state.authenticated) {
        next();
      } else {
        next('signin');
      }
    })
  }
  },
  {
    path: '/post',
    name: 'Post',
    component: () => import('../views/Post.vue'),
 
    } 
  },
  {
    path: '*',
    redirect: '/'
  },
]
 
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

code du store

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
    authenticated: null,
  },
  mutations: {
    setAuthentication(state, status){
      state.authenticated = status;
    }
 
  },
  actions: {
  },
  modules: {
  }
})

si on n'est pas authenticated, il faut faire
Code:

1 2 3 4 next('Connexion'); // et pas // next('signin')
mais sinon, est ce que tu vois la requête isAuthenticated partir sur le serveur?
si oui quelle est le code de réponse ?
il est possible que tu doives tester le status de la reponse pour faire un throw :
(j'ai pas l'API de fetch en tête, je te donne le principe)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 fetch(...).then((resp) > { // tester en fonction de la réponse // si ton serveur t'envoie un code d'erreur par exemple if (resp.status <200 || resp.status >= 400) { throw Error(`le serveur a répondu avec un code ${resp.status}`); } return resp.data; // ou bien ton api renvoie une info dans les données ? }) .then(()=>{...}) .catch(()=>{...})

1 pièce(s) jointe(s)

Merci beaucoup pour ton aide ça fonctionne cependant il m 'affiche deux error que je n'arrive pas à voir il s'affiche en haut a droit et dans le fichier error. Comment peut on détecté ces erreurs ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function initAuthenticated(){
  const { authenticated } = store.state;
  if (authenticated !== null) {
    return Promise.resolve();
  }
  return fetch('http://localhost:3000/api/auth/user/login/isAuthenticated')
  .then((response)=>{
    authenticated = store.commit('setAuthentication', authenticated)
    console.log(response)
    return true
  })
 
    .catch((error) =>{
      console.log(error)
      return false
    })
 
}

Pièce jointe 593882

20/03/2021, 14h24
tony060

1 pièce(s) jointe(s)

J'ai pu voir ce message qui s'affiche : TypeError: "authenticated" is read-only
at _readOnlyError (readOnlyError.js?b1f8:2)
at eval (index.js?a18c:14)

Pièce jointe 593883

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function initAuthenticated(){ const { authenticated } = store.state; if (authenticated !== null) { return Promise.resolve(); } return fetch('http://localhost:3000/api/auth/user/login/isAuthenticated') .then((response)=>{ // LE PROBLÈME EST ICI authenticated = store.commit('setAuthentication', authenticated) console.log(response) return true }) .catch((error) =>{ console.log(error) return false }) }
tu essayes d'affecter à authenticated le résultat du comité.
3 problemes :
1/ authenticated est une constante, tu ne peux pas la reaffecter
2/ le résultat d'un commit c'est vous, donc sans intérêt
3/ tu ne fais rien de authenticated par la suite

conclusion, tout cela ne sert qu'à faire un bug...

20/03/2021, 14h50
gwyohm

par contre dans ton code, ça ne va toujours pas: tu n'exploites pas le retour du serveur pour mettre à jour authenticated. tu mets à jour avec sa propre valeur
20/03/2021, 15h06
tony060

Je t'avouerai que l'a je suis perdu. Car dans le backend je ne sais pas si je dit une connerie mais je n'ai pas prévu pour renvoyé une erreur ou autre par rapport à cela .
21/03/2021, 11h10
gwyohm

hello,
que fait http://localhost:3000/api/auth/user/...sAuthenticated ?

tu peux monter le code de ce endpoint ? Une réponse quand tu es connecté ? une réponse quand tu n'es pas connecté ?

2 pièce(s) jointe(s)

Salut ,'
Je n'ai pas de route http://localhost:3000/api/auth/user/...sAuthenticated mise à part celle que nous avons créé pour le 'garde d'identification' .Je ne sais pas si cela peut jouer au problème. Et si ta première question était sur le fait de savoir ce qui s'affiche lorsque je tape dans la barre de navigation : http://localhost:3000/api/auth/user/...sAuthenticated sa m'affiche : Cannot GET /api/auth/user/login/isAuthenticated .

J'espère t'avoir fourni ce que tu demandais.

celui ci c'est mon code pour ce logué

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
    checkForm () {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        console.log(`email: ${this.email}, password: ${this.password}`)
      } else {
        this.submitStatus = 'PENDING'
        setTimeout(() => {
          this.submitStatus = 'OK'
        }, 500)
      }
      //sécurité
       if(this.email == this.email && this.password == this.password){
        this.$store.commit("setAuthentication", true);
        //this.$router.replace({name: "Account"})
        }else{
          console.log('l identifient n est pas correcte!')
        }
      this.axios.post("http://localhost:3000/api/auth/user/login",
      {
 
        email:this.email,
        password:this.password,  
        id_user: this.id_user ,
        token: this.token
 
      })       
      .then((response) => {
        localStorage.setItem('id_user', response.data.id_user)
        localStorage.setItem('token', response.data.token)
        axios.defaults.headers.common['Authorization'] = "Bearer " + response.data.token;
        console.log(response.data.token)         
        this.$router.push('/Account')
      }).catch((error) => {
        console.log(error)
        this.errored = true  
      })    
    },

Voici le code d'hier que tu m as dit qui n est pas bon.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function initAuthenticated(){
  const { authenticated } = store.state;
  if (authenticated !== null) {
    return Promise.resolve();
  }
  return fetch('http://localhost:3000/api/auth/user/login/isAuthenticated')
  .then((response)=>{
    authenticated = store.commit('setAuthentication', authenticated)
    console.log(response)
    return true
  })
 
    .catch((error) =>{
      console.log(error)
      return false
    })
 
}

connecter
Pièce jointe 593925

pas connecter
Pièce jointe 593926