localStorage

Notre mécanisme d'authentification est fonctionnel, mais non persistant. Si l’on rafraichit la page, toutes nos données sont réinitialisées. Nous allons utiliser la Web Storage API offert par les navigateurs pour sauvegarder nos informations.

Deux mécanismes sont offerts par les navigateurs au travers de la Web Storage API :

sessionStorage maintient une zone de stockage distinct pour chaque origine donnée qui est disponible pour la durée de la session de la page (tant que le navigateur est ouvert, y compris les rechargements et restaure)
localStorage fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert.

Nous utiliserons le localStorage dans notre application afin de garder les utilisateurs connectés et leurs données même après la fermeture du navigateur, ou de la web app.

Pour nous faciliter la tâche importer le Plugin Quasar Local/Session Storage :

Local/Session Storage Plugins | Quasar FrameworkQuasar Framework

Importer le plugin Quasar LocalStorage

Les plugins ne sont pas automatiquement ajoutés au projet, il faut donc manuellement l'importer depuis le fichier quasar.config.js.

Ajouter 'LocalStorage' au tableau plugins :

quasar.config.js

// ...
module.exports = configure(function (/* ctx */) {
  return {
    // ...
    framework: {
      // ...
      // Quasar plugins
      plugins: [
        'Dialog',
        'Loading',
        'LocalStorage'
      ]
      // ...
    }
    // ...
  }
})

Enregistrer user et token dans localStorage

Lorsqu'un utilisateur s'authentifie avec succès, nous sauvegarderons l'état du magasin Auth user et token dans le LocalStorage du navigateur.

En premier, importer le plugin LocalStorage dans le magasin Auth. Nous y avions déjà importé le plugin Loading, il suffit donc d'ajouter LocalStorage juste après :

store/store-auth.js

import { Loading, LocalStorage } from 'quasar'

Ensuite, modifier l'action setUser pour qu'elle sauvegarde les données du magasin Auth dans le localStorage du navigateur.

6 : Sauvegarde le state.user dans le localStorage avec la clé 'user'
7 : Sauvegarde le state.token dans le localStorage avec la clé 'token'

store/store-auth.js

  /**
   * @param {{data:{user:any,token:string}}} res
   */
  const setUser = async (res) => {
    token.value = res.data.access_token
    user.value = res.user

    LocalStorage.set('user', user.value)
    LocalStorage.set('token', token.value)

    await router.push('/')
    Loading.hide()
  }

LocalStorage dans l’inspecteur

Maintenant nous pouvons vérifier si les données ont bien été sauvegardées dans le localStorage en utilisant l'inspecteur.

Charger les données du localStorage

Si l’on rafraichit la page, on constate que les données du localStorage sont toujours présentes, mais que nous ne sommes plus connectés dans notre application.

On peut le constater en inspectant le magasin de notre application.

Pour pallier à ce problème, il faut inspecter le localStorage au démarrage de l'application et s'il contient des données, alors les récupérer pour les injecter dans le magasin Auth.

Nous allons réaliser cette opération après que l'application soit montée, mounted. Pour ce faire, nous allons modifier le composant principal de notre application : src/App.vue.

Ajouter le contenu suivant à src/App.vue :

6 : importation du crochet useAuthStore pour utiliser notre magasin d'authentification
7 : importation du crochet onMounted pour executer du code au chargement de l'application
8 : importation du plugin LocalStorage pour importer les variables du stockage local
10 : Mise en place du magasin authStore
13 et 14 : Récupération des des données user et token du localStorage
- La méthode .getItem(key) retourne la valeur stockée dans le localStorage avec la clé, key, passée en paramètre ou null.
16-19 : Si un user et un token existent
- 17 & 18 : on affecte les valeurs récupérées au magasin.

src/App.vue

<template>
  <router-view/>
</template>

<script setup>
import { useAuthStore } from 'stores/store-auth'
import { onMounted } from 'vue'
import { LocalStorage } from 'quasar'

const auth = useAuthStore()

onMounted(() => {
  const user = LocalStorage.getItem('user')
  const token = LocalStorage.getItem('token')

  if (user && token) {
    auth.user = user
    auth.token = token
  }
})

</script>

On peut maintenant se connecter puis rafraichir la page et constater que les données sont remontées dans le magasin Auth.

Déconnexion

On reste connecté, c'est cool, mais il faudrait bien pouvoir se déconnecter maintenant.

On va créer une action deconnecterUtilisateur dans le magasin Auth qui va :

Déconnecter l'utilisateur de l'API
Vider les ref user et token du magasin
Supprimer toutes les données du localStorage : LocalStorage.clear()
Rediriger l'utilisateur vers le formulaire de connexion.

Déconnecter de l'API

Pour se déconnecter de l'API il faut utiliser la route POST /logout décrite ci-après.

Lorsqu'on fait appel à cette route, il faut y passer le token de l'utilisateur dans l'entête de la requête.

Le token permettra d'identifier l'utilisateur à déconnecter, et révoquera le token actuel qui sera inutilisable.

API : Se déconnecter

POST /logout

Headers

Name

Type

Description

Authorization

string

Token de type Bearer Authorization: Bearer 1Fa...3'

{
    "message": "Successfully logged out"
}

Axios ajouter un Token de type Bearer

Voici comment faire pour ajouter un token de type bearer dans l'entête d'une requête avec axios.

// Token
const token = '123456'
// Configuration d'Axios
const config = {
  // Header avec Token
  headers: { Authorization: 'Bearer ' + token }
}
// Requête GET avec config
const res = await axios.get('/taches', config)
console.log(res)

En fonction de la méthode axios : get, post, ... config vient en 2e ou 3e paramètre !

axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

Not found

Action deconnecterUtilisateur

Nous pouvons maintenant créer notre nouvelle action deconnecterUtilisateur dans le magasin Auth.

1 : Récupération en paramètre de :
- commit pour appeler le mutations
- state pour récupérer la valeur du token
2 : Affiche le barre de chargement, le spinner
3 : Récupère l'objet Vue this et le stocke dans la variable that afin de pouvoir y accéder à l'intérieur de la fonction anonyme créée en paramètre de that().
5-7 : config Axios
- 6 : Création de l'entête avec token, en récupérant le token du magasin state.token
9: Envoi de la requête POST /logout sans données mais avec le token en entête.
10-15 : En cas d'erreur affiche un message
16-26 : Dans tous les cas finally
- 18-19 : Mets à null les données du magasin user et token en utilisant les mutations.
- 21 : Supprimer le localStorage
- 23 : Redirige l'utilisateur
- 25 : Dans tous les cas, cache barre de chargement, le spinner.

store/store-auth.js

  const deconnecterUtilisateur = async () => {
    Loading.show()

    const config = {
      headers: { Authorization: 'Bearer ' + token.value }
    }

    try {
      await api.post('/logout', {}, config)
    } catch (e) {
      afficherMessageErreur(
        'Impossible de se déconnecter'
      )
    } finally {
      user.value = null
      token.value = null
      LocalStorage.clear()
      await router.push('/connexion')
      Loading.hide()
    }
  }Main

Bouton de déconnexion

Pour exécuter l'action deconnecterUtilisateur nous allons remplacer le bouton "Se connecter" par un bouton "Se déconnecter" lorsqu'un utilisateur est connecté.

Pour savoir si l'utilisateur est connecté nous allons tester si l'état, state, user du magasin Auth contient une valeur.

Nous allons faire ce test dans le composant src/layout/MainLayout.vue.

Pour que MainLayout.vue puisse accéder à l’état, state, user du magasin Auth, nous allons devoir l'initialiser dans le setup de MainLayout.vue.

layout/MainLayout.vue

import { useAuthStore } from 'stores/store-auth'

Ensuite, il faut utiliser computed pour calculer la donnée user, en l'occurence pour vérifier si elle vaut null.

layout/MainLayout.vue

import { computed, ref } from 'vue'
import { useAuthStore } from 'stores/store-auth'

const auth = useAuthStore()

const isUserConnected = computed(() => auth.token !== null)

On peut maintenant créer notre bouton de déconnexion et gérer l'affichage des boutons "se connecter" et "se déconnecter".

2 : Affiche le bouton "Se connecter" si PAS de user
10 : v-else, à l'inverse affiche le bouton "Se déconnecter" si user existe
12 : Au clic fait appel à l'action deconnecterUtilisateur du magasin Auth.

layout/MainLayout.vue

<q-btn
  v-if="!isUserConnected"
  flat
  icon-right="account_circle"
  label="Se connecter"
  to="/connexion"
/>

<q-btn
  v-else
  flat
  icon-right="account_circle"
  label="Se déconnecter"
  @click="auth.deconnecterUtilisateur"
/>

Résultat

layout/MainLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-toolbar-title>
          ToDo
        </q-toolbar-title>

        <q-btn
          v-if="!isUserConnected"
          flat
          icon-right="account_circle"
          label="Se connecter"
          to="/connexion"
        />

        <q-btn
          v-else
          flat
          icon-right="account_circle"
          label="Se déconnecter"
          @click="auth.deconnecterUtilisateur"
        />

        <div>Quasar v{{ $q.version }}</div>

        <q-btn
          aria-label="Menu"
          dense
          flat
          icon="menu"
          round
          @click="toggleLeftDrawer"
        />
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      bordered
      show-if-above
    >
      <q-list>
        <q-item-label
          header
        >
          Pages
        </q-item-label>

        <q-item
          v-for="(link, index) of links"
          :key="index"
          v-ripple
          :to="link.path"
          clickable
          exact
        >
          <q-item-section avatar>
            <q-icon :name="link.icon"/>
          </q-item-section>

          <q-item-section>
            <q-item-label>{{ link.name }}</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view/>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useAuthStore } from 'stores/store-auth'

const auth = useAuthStore()

const isUserConnected = computed(() => auth.token !== null)

const links = ref([
  { path: '/', name: 'Home', icon: 'home' },
  { path: '/taches', name: 'Tâches', icon: 'list' }
])

const leftDrawerOpen = ref(false)

function toggleLeftDrawer () {
  leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>

src/store/store-auth.js

import { defineStore } from 'pinia'
import { api } from 'boot/axios'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { afficherMessageErreur } from 'src/fonctions/message-erreur'
import { Loading, LocalStorage } from 'quasar'

export const useAuthStore = defineStore('authStore', () => {
  const user = ref(null)
  const token = ref(null)
  const router = useRouter()

  /**
   * @param {{data:{user:any,token:string}}} res
   */
  const setUser = async (res) => {
    token.value = res.data.access_token
    user.value = res.data.user

    LocalStorage.set('user', user.value)
    LocalStorage.set('token', token.value)

    await router.push('/')
    Loading.hide()
  }

  /**
   * @param {{email: string, name: string, password: string, password_confirmation: string}} utilisateur
   */
  const enregistrerUtilisateur = async (utilisateur) => {
    Loading.show()
    let res
    try {
      res = await api.post('/register', utilisateur)
      setUser(res)
    } catch (e) {
      Loading.hide()
      afficherMessageErreur(
        'Impossible de créer le compte',
        Object.values(e.response.data)
      )
    }
  }

  /**
   * @param {{email:string, password:string}} utilisateur
   */
  const connecterUtilisateur = async (utilisateur) => {
    Loading.show()
    let res
    try {
      res = await api.post('/login', utilisateur)
      setUser(res)
    } catch (e) {
      Loading.hide()
      afficherMessageErreur(
        'Impossible de se connecter',
        Object.values(e.response.data)
      )
    }
  }

  const deconnecterUtilisateur = async () => {
    Loading.show()

    const config = {
      headers: { Authorization: 'Bearer ' + token.value }
    }

    try {
      await api.post('/logout', {}, config)
    } catch (e) {
      afficherMessageErreur(
        'Impossible de se déconnecter'
      )
    } finally {
      user.value = null
      token.value = null
      LocalStorage.clear()
      await router.push('/connexion')
      Loading.hide()
    }
  }

  return {
    enregistrerUtilisateur,
    connecterUtilisateur,
    deconnecterUtilisateur,
    user,
    token
  }
})

quasar.conf.js

/* eslint-env node */

/*
 * This file runs in a Node context (it's NOT transpiled by Babel), so use only
 * the ES6 features that are supported by your Node version. https://node.green/
 */

// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js

const { configure } = require('quasar/wrappers')

module.exports = configure(function (/* ctx */) {
  return {
    eslint: {
      // fix: true,
      // include: [],
      // exclude: [],
      // rawOptions: {},
      warnings: true,
      errors: true
    },

    // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
    // preFetch: true,

    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli-vite/boot-files
    boot: [
      'axios'
    ],

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
    css: [
      'app.scss'
    ],

    // https://github.com/quasarframework/quasar/tree/dev/extras
    extras: [
      // 'ionicons-v4',
      // 'mdi-v5',
      // 'fontawesome-v6',
      // 'eva-icons',
      // 'themify',
      // 'line-awesome',
      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!

      'roboto-font', // optional, you are not bound to it
      'material-icons' // optional, you are not bound to it
    ],

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
    build: {
      target: {
        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
        node: 'node16'
      },

      vueRouterMode: 'hash', // available values: 'hash', 'history'
      // vueRouterBase,
      // vueDevtools,
      // vueOptionsAPI: false,

      // rebuildCache: true, // rebuilds Vite/linter/etc cache on startup

      // publicPath: '/',
      // analyze: true,
      // env: {},
      // rawDefine: {}
      // ignorePublicFolder: true,
      // minify: false,
      // polyfillModulePreload: true,
      // distDir

      // extendViteConf (viteConf) {},
      // viteVuePluginOptions: {},

      // vitePlugins: [
      //   [ 'package-name', { ..options.. } ]
      // ]
      alias: {
        '~': '/src'
      }
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
    devServer: {
      // https: true
      open: true // opens browser window automatically
    },

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
    framework: {
      config: {},

      // iconSet: 'material-icons', // Quasar icon set
      lang: 'fr', // Quasar language pack

      // For special cases outside of where the auto-import strategy can have an impact
      // (like functional components as one of the examples),
      // you can manually specify Quasar components/directives to be available everywhere:
      //
      // components: [],
      // directives: [],

      // Quasar plugins
      plugins: [
        'Dialog',
        'Loading'
      ]
    },

    // animations: 'all', // --- includes all animations
    // https://v2.quasar.dev/options/animations
    animations: [],

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#sourcefiles
    // sourceFiles: {
    //   rootComponent: 'src/App.vue',
    //   router: 'src/router/index',
    //   store: 'src/store/index',
    //   registerServiceWorker: 'src-pwa/register-service-worker',
    //   serviceWorker: 'src-pwa/custom-service-worker',
    //   pwaManifestFile: 'src-pwa/manifest.json',
    //   electronMain: 'src-electron/electron-main',
    //   electronPreload: 'src-electron/electron-preload'
    // },

    // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
    ssr: {
      // ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
      // will mess up SSR

      // extendSSRWebserverConf (esbuildConf) {},
      // extendPackageJson (json) {},

      pwa: false,

      // manualStoreHydration: true,
      // manualPostHydrationTrigger: true,

      prodPort: 3000, // The default port that the production server should use
      // (gets superseded if process.env.PORT is specified at runtime)

      middlewares: [
        'render' // keep this as last one
      ]
    },

    // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
    pwa: {
      workboxMode: 'generateSW', // or 'injectManifest'
      injectPwaMetaTags: true,
      swFilename: 'sw.js',
      manifestFilename: 'manifest.json',
      useCredentialsForManifestTag: false
      // useFilenameHashes: true,
      // extendGenerateSWOptions (cfg) {}
      // extendInjectManifestOptions (cfg) {},
      // extendManifestJson (json) {}
      // extendPWACustomSWConf (esbuildConf) {}
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
    cordova: {
      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
    capacitor: {
      hideSplashscreen: true
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
    electron: {
      // extendElectronMainConf (esbuildConf)
      // extendElectronPreloadConf (esbuildConf)

      inspectPort: 5858,

      bundler: 'packager', // 'packager' or 'builder'

      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',

        // Windows only
        // win32metadata: { ... }
      },

      builder: {
        // https://www.electron.build/configuration/configuration

        appId: 'quasar-demo'
      }
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
    bex: {
      contentScripts: [
        'my-content-script'
      ]

      // extendBexScriptsConf (esbuildConf) {}
      // extendBexManifestJson (json) {}
    }
  }
})

PrécédentMagasin Auth SuivantCharger tâches utilisateur

Mis à jour il y a 2 ans

Ce contenu vous a-t-il été utile ?

hashtagImporter le plugin Quasar LocalStorage

hashtagEnregistrer user et token dans localStorage

hashtag LocalStorage dans l’inspecteur

hashtagCharger les données du localStorage

hashtagDéconnexion

hashtagDéconnecter de l'API

hashtagAPI : Se déconnecter

hashtagHeaders

hashtagAxios ajouter un Token de type Bearer

hashtagAction deconnecterUtilisateur

hashtagBouton de déconnexion

hashtagRésultat

Importer le plugin Quasar LocalStorage

Enregistrer user et token dans localStorage

LocalStorage dans l’inspecteur

Charger les données du localStorage

Déconnexion

Déconnecter de l'API

API : Se déconnecter

Headers

Axios ajouter un Token de type Bearer

Action deconnecterUtilisateur

Bouton de déconnexion

Résultat