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