Gardes de routage globaux, exclusifs et locaux

1. Créer un itinéraire

//创建一个路由器,并暴露
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        },

    ]
})

2. Garde de routage global

       Les gardes globales sont définies sur le routeur, qui se trouve dans router/index.js. Vous pouvez définir des gardes globaux ici, et bien sûr, vous pouvez également définir des gardes globaux à d'autres endroits, tels que main.js ou App.vue. Cela dépend des besoins spécifiques.

Route guard : protégez la sécurité des routes. (autorisations)

(1) Garde de pré-route globale

Chaque fois avant/initialisation du commutateur de route - appelé

La fonction de rappel du front guard global beforeChaque garde global accepte trois paramètres : to, from, next

Description de trois paramètres :

• pour sauter dans l'objet de routage cible
•  de L'objet de routage qui est actuellement prêt à partir
•  Après avoir appelé cette méthode, entrez la fonction de crochet suivante, qui est similaire à la prochaine appelée dans le middleware en express ou en koa

 Description de la fonction suivante :

• Si la fonction suivante appelle normalement next(), cela signifie que l'itinéraire de saut est entré normalement et que l'état de navigation est confirmé
•  Si la fonction suivante est appelée avec false, comme : next(false), cela signifie un saut de navigation dans le terminal
•  La fonction next peut également passer des paramètres, ce qui signifie sauter à l'instruction route next("/"), ou à la route du paramètre next({ path: "/" })

router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from);

    if (to.meta.isAuth) { //是否需要鉴权
        if (localStorage.getItem('school') === 'atguigu') {
            next() //放行
        } else {
            alert('学校名不对，无权限！')
        }
    } else {
        next()
    }
});

(2) Protection de routage arrière globale

afterEach garde de routage global

La fonction de rappel de la garde globale afterEach accepte deux paramètres comme vers et depuis

Description de deux paramètres :

• pour sauter dans l'objet de routage cible
• de L'objet de routage qui est actuellement prêt à partir

afterEach n'a pas de fonction de rappel next(), car lorsque afterEach est appelé, la route a déjà sauté.

router.afterEach((to, from) => {
    console.log('后置路由守卫', to, from);
    document.title = to.meta.title || '硅谷系统'
});

3. Garde d'itinéraire exclusif

     La fonction de crochet utilisée est la même que la protection de routage globale, qui est beforeEnter. La différence est que la protection de routage exclusive est définie dans l'enregistrement de routage, et la protection de routage globale est définie dans le fichier d'entrée. La protection de routage exclusive est uniquement valide lorsque l'itinéraire est entré. La garde globale de l'itinéraire signifie que tous les sauts d'itinéraire seront bloqués.

      Fait référence à la fonction de crochet qui peut également être définie lors de la configuration d'un seul itinéraire.

 //是否授权
 meta: { isAuth: true, title: '新闻' },
 //独享路由守卫
 beforeEnter: (to, from, next) => {
    // ...
    console.log('独享路由守卫', to, from);
    if (to.meta.isAuth) { //是否需要鉴权
    if (localStorage.getItem('school') === 'atguigu') {
         next() //放行
    } else {
         alert('学校名不对，无权限！')
         }
    } else {
         next()
    }
}

4. Routage garde au sein du groupe

1. La garde dans le composant est définie à l'intérieur du composant, la garde de routage dans l'objet d'options du composant

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

3. Le composant beforeRouteEnter est appelé avant la création du composant et l'instance du composant ne peut pas être utilisée

4. La route beforeRouteUpdate est modifiée, mais elle est appelée lorsque le composant est réutilisé, par exemple : routage dynamique

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

export default {
    name:'About',
    //通过路由规则，进入该组件被调用
    beforeRouteEnter (to, from, next) {
        console.log('About-beforeRouteEnter', to, from);
        if (to.meta.isAuth) { //是否需要鉴权
            if (localStorage.getItem('school') === 'atguigu') {
                next() //放行
            } else {
                alert('学校名不对，无权限！')
            }
        } else {
            next()
        }
    },
    //通过路由规则，离开该组件时被调用
    beforeRouteLeave (to, from, next) {
        console.log('About-beforeRouteLeave', to, from);
        next()
    }
}