Detaillierte Erläuterung des Vue Routing Guard und Analyse seiner Anwendungsszenarien

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie erfreut sich Vue als Entwicklungsframework bei Entwicklern immer größerer Beliebtheit. Der Routing-Mechanismus von Vue ist auch ein integraler Bestandteil des Vue-Frameworks. Routing-Systeme können Entwicklern beim Erstellen komplexer Single-Page-Anwendungen helfen und bieten gleichzeitig eine flexible Möglichkeit, den Seitenstatus und die Benutzernavigation zu verwalten. In diesem Fall wird der Vue-Routing-Guard zu einem Wissenspunkt, der beherrscht werden muss.

Was sind also Vue-Routenwächter? In Vue.js ist Route Guard ein Mechanismus zur Steuerung von Sprüngen zwischen Seiten. Er wird hauptsächlich für Vorgänge wie die Berechtigungsüberprüfung und die Statusverwaltung während der Seitennavigation verwendet. Vue-Routenwächter werden hauptsächlich in drei Typen unterteilt: globale Routenwächter, exklusive Routenwächter und Wächter auf Komponentenebene.

Global Route Guard:

Global Route Guard bedeutet einen Codeblock, der ausgeführt werden muss, wenn sich alle Routen ändern. Es gibt drei Haupttypen von globalen Routenwächtern:

1. beforeEach(to, from, next)

Sie können hier die Berechtigungsüberprüfung und andere Vorgänge durchführen diejenigen, die gerade eintreten, bzw. diejenigen, die gleich gehen.

Der Beispielcode lautet wie folgt:

router.beforeEach((to, from, next) => {
  // 进行权限验证等操作
  if (to.meta.requireAuth) {
    if (localStorage.getItem('token')) {
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next();
  }
})

2. afterEach(to, from)

wird aufgerufen, nachdem die Route eingegeben wurde, und wird im Allgemeinen für Vorgänge wie die Protokollierung verwendet.

Der Beispielcode lautet wie folgt:

router.afterEach((to, from) => {
  // 记录日志等操作
})

3. beforeResolve(to, from, next)

wird aufgerufen, nachdem die Route analysiert wurde, und ist nur nützlich, wenn Route Lazy Loading verwendet wird.

Der Beispielcode lautet wie folgt:

router.beforeResolve((to, from, next) => {
  // 进行路由解析后的处理
  next();
})

Route Exclusive Guard:

Route Exclusive Guard ist ein Wächter für eine bestimmte Route und wird nur aufgerufen, wenn die aktuelle Route ein- oder ausgeht. Die Verwendung ist wie folgt:

Der Beispielcode lautet wie folgt:

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 进行权限验证等操作
        if (localStorage.getItem('admin')) {
          next();
        } else {
          next({
            path: '/login',
            query: {redirect: to.fullPath}
          })
        }
      }
    }
  ]
})

Komponentenebenenschutz:

Komponentenebenenschutz bezieht sich auf den Navigationsschutz innerhalb der Komponente und kann zum Verwalten des internen Status der Komponente verwendet werden. Es gibt vier Haupttypen von Wächtern auf Komponentenebene:

1. beforeRouteEnter(to, from, next)

Wird vor dem Routeneintritt aufgerufen und beim Zugriff auf den internen Status der Komponente verwendet.

Der Beispielcode lautet wie folgt:

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteEnter(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      // 访问不到组件实例
      next(vm => {
        vm.user = user
      })
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

2. beforeRouteLeave(to, from, next)

Wird vor dem Verlassen der Route aufgerufen und kann verwendet werden, um zu bestätigen, ob die aktuelle Route verlassen oder der Änderungsvorgang gespeichert werden soll.

Der Beispielcode lautet wie folgt:

export default {
  data() {
    return {
      text: ''
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.text !== '') {
      const confirmMsg = '您的修改还未保存，确定要离开吗？'
      if (confirm(confirmMsg)) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  }
}

3. beforeRouteUpdate(to, from, next)

wird aufgerufen, wenn die aktuelle Route aktualisiert wird, um den internen Status der Komponente zu aktualisieren.

Der Beispielcode lautet wie folgt:

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteUpdate(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      this.user = user
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

4. beforeRouteLeave(to, from, next)

wird während des Routenrenderings aufgerufen und kann für serverseitiges Rendering und andere Vorgänge verwendet werden.

Der Beispielcode lautet wie folgt:

export default {
  beforeRouteRender(to, from, next) {
    // 进行服务器端渲染等操作
    next();
  }
}

Durch die obige Einführung von Routing Guards können wir feststellen, dass Routing Guards viele Anwendungsszenarien haben, z. B. das Bestimmen, ob eine Anmeldung erfolgen soll, das Durchführen einer Berechtigungsüberprüfung, das Speichern von Änderungsvorgängen usw. Verschiedene Szenarien erfordern die Verwendung unterschiedlicher Routing-Schutzvorrichtungen, und Sie müssen während der Entwicklung den geeigneten Schutz für die Verarbeitung auswählen.

Kurz gesagt, Vue Route Guard ist ein sehr wichtiger Bestandteil, wenn er richtig verwendet wird, kann er die Sicherheit und Stabilität der Anwendung erheblich verbessern. Daher müssen Entwickler ein tieferes Verständnis der Verwendungs- und Anwendungsszenarien von Route Guards haben.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Vue Routing Guard und Analyse seiner Anwendungsszenarien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!