Global, exclusive, local Routing Guard

Un.、Créer une route

//Créer un routeur,Et exposer
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        },

    ]
})

2.、Global Routing Guard

       Les gardes du monde sont en place router Au - dessus,Celui - ci peut être router/index.js On a trouvé.Vous pouvez mettre en place des gardes globaux ici,Bien sûr, il est possible d'installer des gardes globaux ailleurs,Par exemple, main.js Ou App.vue.Cela dépend des besoins spécifiques.

Les gardes de route：Sécuriser le routage.（Autorité）

（1）Global Pre - Router Guard

Avant chaque changement de route/Lors de l'initialisation-Appelé

Global Pre - GuardbeforeEachLa fonction de rappel de Global Guard accepte trois arguments comme：to,from,next

Description des trois paramètres：

• toSauter dans l'objet de routage cible
•  fromObjet de routage actuellement prêt à partir
•  nextAprès avoir appelé la méthode,Passez à la prochaine fonction de crochet,L'action est similaire àexpressOukoaAppelé dans le middlewarenext

 nextDescription de la fonction：

• SinextAppel normal de la fonctionnext()Indique une entrée normale dans la route de saut,L'état de navigation est confirmé
•  SinextLa fonction est passée dansfalse,Par exemple:：next(false), Indique un saut de navigation terminal
•  next La fonction peut également passer le paramètre , Indique un saut vers le routage de l'instruction next("/"),Ounext({ path:"/" })Routage des paramètres

router.beforeEach((to, from, next) => {
    console.log('Garde de route avant', to, from);

    if (to.meta.isAuth) { // Besoin d'authentification 
        if (localStorage.getItem('school') === 'atguigu') {
            next() //Release
        } else {
            alert('Le nom de l'école est incorrect.,Pas de permission！')
        }
    } else {
        next()
    }
});

（2）Global post - Routing Guard

afterEachGlobal Routing Guard

afterEach La fonction de rappel de Global Guard accepte deux arguments comme to,from

Description des deux paramètres ：

• toSauter dans l'objet de routage cible
• fromObjet de routage actuellement prêt à partir

afterEachNon.next()Fonction de rappel,Parce queafterEachLorsqu'il est appelé, Le routage est terminé .

router.afterEach((to, from) => {
    console.log('Garde de route arrière', to, from);
    document.title = to.meta.title || 'Système Silicon Valley'
});

Trois、Garde de route exclusive

      Les fonctions de crochet utilisées sont compatibles avec Global Routing Guard ,PourbeforeEnter,La différence est, Les gardes exclusifs de routage sont définis dans les enregistrements de routage , Global Routing Guard est défini dans le fichier d'entrée , Les gardes exclusifs de routage ne sont disponibles que lorsque le routage entre , Global route Guard est que tous les sauts de route seront interceptés .

      Une fonction de crochet qui peut également être définie lors de la configuration d'une seule route .

 //Autorisation ou non
 meta: { isAuth: true, title: 'Nouvelles' },
 //Garde de route exclusive
 beforeEnter: (to, from, next) => {
    // ...
    console.log('Garde de route exclusive', to, from);
    if (to.meta.isAuth) { // Besoin d'authentification 
    if (localStorage.getItem('school') === 'atguigu') {
         next() //Release
    } else {
         alert('Le nom de l'école est incorrect.,Pas de permission！')
         }
    } else {
         next()
    }
}

Quatre、 Gardes de route en groupe

1.  Les gardes à l'intérieur d'un composant sont définis à l'intérieur du composant , Routeur dans l'objet Component options

2.  Il y a trois gardes de routage à l'intérieur du composant ,Pour：beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave.

3.  beforeRouteEnterAppelé avant la création du composant, Impossible d'utiliser l'Instance composant this

4.  beforeRouteUpdate Routage modifié ,Mais appelé lorsque le composant est réutilisé,Par exemple,：Routage dynamique

5.  beforeRouteLeave Ce composant est appelé lorsque la navigation part  

export default {
    name:'About',
    //Par les règles de routage, L'entrée dans ce composant est appelée 
    beforeRouteEnter (to, from, next) {
        console.log('About-beforeRouteEnter', to, from);
        if (to.meta.isAuth) { // Besoin d'authentification 
            if (localStorage.getItem('school') === 'atguigu') {
                next() //Release
            } else {
                alert('Le nom de l'école est incorrect.,Pas de permission！')
            }
        } else {
            next()
        }
    },
    //Par les règles de routage,Appelé à quitter ce composant
    beforeRouteLeave (to, from, next) {
        console.log('About-beforeRouteLeave', to, from);
        next()
    }
}