Navigation guards

Problème

Un utilisateur non authentifié peut accéder à toutes les pages. Il pourrait donc créer des tâches qui ne seraient pas sauvegardées dans l'API ce qui n'a pas de sens.

Solution

Créer des intercepteurs de navigation, Navigation guards. Comme leur nom le suggère, ils sont utilisés pour intercepter les navigations et peuvent ensuite rediriger l'utilisateur ou le stopper.

https://router.vuejs.org/fr/guide/advanced/navigation-guards.htmlrouter.vuejs.org

Utiliser les intercepteurs de Vue router

Les intercepteurs sont gérés par Vue router. On peut récupérer Vue router via l'objet router dans un projet Vue. Cet objet propose deux intercepteurs globaux :

• beforeEach : déclenché avant le chargement de la nouvelle page

• afterEach : déclenché après le chargement de la nouvelle page

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

router.afterEach((to, from, next) => {
  // ...
})

Arguments to, from, next

Chaque fonction d'interception reçoit trois arguments :

• to: Route: La route d'arrivée, où l'utilisateur veut aller

• from: Route: La route de départ, d'où l'utilisateur vient.

• next: Function: cette fonction doit être appelée pour résoudre l'interception. L'action dépend des arguments fournis à next:

  • next(): se déplace à la route prévue, demandée par l'utilisateur

  • next(false): annuler la navigation courante.

  • next('/') ou next({ path: '/' }): redirige vers la route passée en paramètre.

Assurez-vous de toujours appeler la fonction next, sinon la navigation ne sera jamais résolue.

Créer un fichier d'interception

Les intercepteurs doivent être déclarés avant même l'affichage de la première page, c'est pourquoi nous allons créer un nouveau fichier de démarrage, boot, qui contiendra les règles de navigation.

Dans notre intercepteur, nous allons utiliser beforeEach afin de détecter si l'utilisateur est connecté AVANT de l'autorisé à continuer.

Si l'utilisateur n'est pas connecté et qu'il ne va pas vers la page de connexion, nous le redirigerons vers la route /connexion.

S'il tente encore d'accéder à une page protégée, après redirection vers /connexion, nous afficherons un message d'erreur.

Pour réaliser ces opérations, nous aurons besoin du LocalStorage pour savoir si l'utilisateur est connecté et de afficherMessageErreur pour afficher le message d'erreur.

Créer le nouveau fichier src/boot/navigation-guards.js et y copier le code ci-après.

src/boot/navigation-guards.js

import { LocalStorage } from 'quasar'
import { afficherMessageErreur } from 'src/functions/message-erreur'

// Récupère l'objet router représentant Vue router
export default ({ router }) => {
  // Avant de rediriger le visiteur
  router.beforeEach((to, from, next) => {
    // Récupère
    const user = LocalStorage.getItem('user')
    // Si PAS connecté et ne vas par vers /connexion on force la redirection
    if (!user && to.path !== '/connexion') {
      // Affiche un message d'erreur uniquement si utilisateur tente d'accéder
      // à une autre page après avoir été redirigé vers la connexion une 1re
      // fois.
      if (from.path === '/connexion') {
        afficherMessageErreur('Page protégée, connexion requise !')
      }
      next('/connexion') // Redirige vers /connexion
    } else {
      next() // Continue la navigation normalement
    }
  })
}

Ajouter notre boot à l'application

Pour que notre fichier soit exécuté au démarrage de l'application, il faut le déclarer dans quasar.conf.js :

• 2 : Ne pas oublier d'ajouter une virgule à la fin de la ligne.

• 3 : On ajoute simplement le nom du fichier, sans l'extension .js au tableau boot.

quasar.conf.js | Ligne 15

boot: [
  'axios',
  'navigation-guards'
],

La navigation dans notre application est maintenant protégée ! Vous pouvez la tester en tentant d'accéder à la liste des tâches ou aux paramètres lorsque vous êtes déconnecté.