Refonte de l'archi des routes avec les "nested routes" de Vue #522
Conversation
frontend/src/layouts/main.vue
Outdated
There was a problem hiding this comment.
Le dossier layouts est insipiré par la logique de Nuxt: https://nuxt.com/docs/guide/directory-structure/layouts
| authenticationRequired: true, | ||
| requiredRole: "InstructionRole", | ||
| }, | ||
| path: "/lettre-officielle", |
There was a problem hiding this comment.
Cette page s'affiche bien seule, sans aucun templating compl'alim autour
| @@ -260,7 +273,8 @@ function chooseAuthorisedRoute(to, from, next, store) { | |||
| next({ name: "LandingPage" }) | |||
| }) | |||
| } else { | |||
| if (to.meta.home) next({ name: store.loggedUser ? "DashboardPage" : "LandingPage" }) | |||
| // 2) vérifie les règles de redirection | |||
| if (to.path === "/") next({ name: store.loggedUser ? "DashboardPage" : "LandingPage" }) | |||
There was a problem hiding this comment.
J'ai du utilisé le path, plutôt que meta.home pour décrire cette redirection, car si on set home: True sur la page mère, toutes les pages children en héritent, et on a une boucle infinie de redirection.
|
Petit comment avant la review Une possibilité plus succincte et flexible serait d'avoir un paramètre meta "fullscreen" (exemple chez MC) : {
path: "/diagnostic-tunnel/:canteenUrlComponent/:year/:measureId",
name: "DiagnosticTunnel",
component: DiagnosticTunnel,
meta:
fullscreen: true,
},
},Et dans l' <AppHeader v-if="!fullscreen" />Cela dit ce n'est pas mal d'avoir les routes nestés à ce niveau aussi, sauf pour un truc : on aura probablement des vues fullscreen à l'intérieur des URLs qui ne le sont pas. Exemple : un tunnel - ça ferait qu'une vue hypothétique Je suis un peu mitigé par rapport à la sous-route |
Je pense qu'il faudrait dans l'idéal éviter ce genre de cas parce que ça peut être assez confusant d'alterner entre une UI avec le header Compl'alim, et une UI fullscreen selon les features. Eventuellement ça, ça marche bien pour les login/signup, mais après une fois connecté, j'imagine l'utilisateur faire ses démarches toujours avec une UI constante, non ? |
|
@ddahan C'est un pattern assez courant lors qu'on est sur un processus/flow, par ex :
Ça m'irait 👍 |
D'où vient le besoin ?
En essayant de créer une page contenant une lettre officielle type "déclaration acceptée", qui aurait vocation à être convertie en PDF, on se rend compte que ce n'est pas possible car le fichier
App.vuecontient déjà tout le templating compl'alim (header, footer, etc.). Or, nous on ne veut aucun templating sur cette page.Travail préparatoire de la feature qui affichera les infos "par entreprise" dans l'url front
Comment on remédie à ça ?
On modifie le fichier
App.vuepour qu'il ne contienne pas de templating (à part les toasts qui ont vocation à être globaux).Ensuite, grâce aux nested routes et l'utilisation de
children, on peut définir :Maindéfinie dans la classe mère, qui contient nos headers/footers compl'alim.2e utilisation
Dans la foulée, j'ai aussi essayé de grouper les pages "pro" avec un autre layout appelée
Proqui ne contient que la rôle bar et unfr-container.Cela signifie que :
authenticationRequired: truepeut n'être séttée qu'une seule fois sur la route parent ! Cela évite les oublis.Exemple : on voit ici que la rolebar est affichée car on est dans une page fille de "l'espace pro".