Discussion :

[tony060]

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.

[Séb.]

Comment gères-tu ta session ?

[tony060]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[gwyohm]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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');
  }
}

[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.

[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...

[tony060]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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: {
  }
})

[gwyohm]

si on n'est pas authenticated, il faut faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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(()=>{...})

[tony060]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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
    })
 
}

[tony060]

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)

[gwyohm]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

[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

[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 .

[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é ?

[tony060]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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


pas connecter