Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Dans les frameworks d'applications à page unique (SPA), tels que Vue.js, les gardes de route sont une fonctionnalité très utile qui vous permet de contrôler l'accès aux routes. Vue.js utilise Vue Router comme gestionnaire de routage officiel. Les gardes de routage sont principalement divisés en gardes globales et gardes intra-composants.

Voici un exemple de mise en place d’un garde-route pour permettre à certains itinéraires d’être accessibles au public :

1. Garde avant mondiale: Dans la configuration de Vue Router, vous pouvez utiliser beforeEach La méthode met en place un front guard global pour vérifier si l'utilisateur est connecté et rediriger l'utilisateur en fonction de l'état de connexion.

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import Dashboard from '../components/Dashboard.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true // 标记需要认证的路由
      }
    }
    // 其他路由...
  ]
});

// 全局前置守卫
router.beforeEach((to, from, next) =
                                   

                    上一篇
                    下一篇