Technologieaustausch

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

In Single-Page-Application-Frameworks (SPA) wie Vue.js sind Routenwächter eine sehr nützliche Funktion, mit der Sie den Zugriff auf Routen steuern können. Vue.js verwendet Vue Router als offiziellen Routing-Manager. Routing-Guards werden hauptsächlich in globale Guards und Intra-Component-Guards unterteilt.

Hier ist ein Beispiel für die Einrichtung eines Routenwächters, um den öffentlichen Zugriff auf bestimmte Routen zu ermöglichen:

1. Globale Frontgarde: In der Konfiguration von Vue Router können Sie verwenden beforeEach Die Methode richtet einen globalen Frontschutz ein, um zu prüfen, ob der Benutzer angemeldet ist, und um den Benutzer entsprechend dem Anmeldestatus umzuleiten.

// 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) =
                                   

                    上一篇
                    下一篇