Detaillierte Erläuterung, wie Vue die Routing-Berechtigungskontrolle implementiert

Vue ist heutzutage eines der beliebtesten Front-End-Frameworks. Im Vergleich zur herkömmlichen Seitenrendering-Methode legt Vue mehr Wert auf die Verwaltung des Front-End-Routings. In tatsächlichen Projekten sind auch die Zugriffsberechtigungen des Front-End-Routings ein sehr wichtiges Thema. Wie implementiert man also die Routing-Berechtigungskontrolle in Vue?

In Vue gibt es zwei Hauptmethoden zur Implementierung der Routing-Berechtigungssteuerung: Eine besteht darin, sie am Front-End zu steuern, dh Routing-Tabellen entsprechend unterschiedlichen Benutzerberechtigungen dynamisch zu generieren Die Back-End-Schnittstelle steuert, das heißt, das Front-End initiiert eine Anfrage an das Back-End und generiert die entsprechende Routing-Tabelle basierend auf den zurückgegebenen Berechtigungsinformationen.

1. Front-End-Steuerungsmethode

In der Front-End-Steuerungsmethode können wir die Routing-Berechtigungssteuerung durch die folgenden Schritte implementieren: #🎜 🎜#

1.1 Konfigurieren Sie in der Routing-Konfigurationsdatei

In Vue erstellen wir normalerweise eine index.jsunter der Datei router , werden in der Datei verschiedene Routing-Informationen konfiguriert. Bei der Routing-Berechtigungssteuerung können wir die meta-Informationen des Routings in dieser Datei konfigurieren, um die Routing-Berechtigungsinformationen zu speichern.

router文件夹下创建一个index.js文件，文件中会配置各种路由信息。在进行路由权限控制时，我们可以在这个文件中配置路由的meta信息，用于存储路由的权限信息。

比如，我们可以这样定义一个需要根据用户权限来控制访问的路由：

{
  path: '/admin',
  name: 'admin',
  component: () => import('@/views/Admin.vue'),
  meta: { requiresAuth: true }
},

在这个路由配置中，我们定义了一个名为requiresAuth的meta属性，用于标记这是一个需要控制权限的路由。

1.2 在路由拦截器中进行控制

拦截器实际上就是一段代码，用于在某些特定的情况下，拦截请求并执行指定的操作。在Vue中，我们可以使用beforeEach方法来拦截路由请求，进行权限控制。

比如，我们可以这样定义一个beforeEach方法：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) {
      next({ path: '/login' });
    } else {
      next();
    }
  } else {
    next();
  }
});

在这个拦截器中，我们通过判断当前需要访问的路由与之前定义的meta属性来判断是否需要进行权限控制。如果需要，我们再根据用户的登录状态等信息进行访问控制，并在必要时跳转到指定的页面。

2. 后端控制方法

在后端控制方法中，我们需要通过向后端发送请求，获取返回的用户权限信息，然后在生成路由表时进行相应的控制。

比如，在一个基于JWT的后端返回/admin这个路由需要管理员权限才能访问，我们可以这样来获取用户的权限信息：

const response = await axios.get('/user');
const permissions = response.data.permissions;

在获取到用户的权限信息后，我们可以利用Vue Router的动态路由生成等功能，来动态地生成路由表。

比如，我们可以这样定义一个动态生成路由表的函数：

function generateRoutesFromMenu (menu = [], permissions = {}) {
  const routes = []

  for (let i = 0, l = menu.length; i < l; i++) {
    const item = menu[i]
    const route = {
      path: item.path,
      name: item.name,
      meta: item.meta, // 从菜单项中提取出路由的meta信息
      component: item.component ? loadView(item.component) : null,
      children: item.children ? generateRoutesFromMenu(item.children, permissions) : []
    }

    // 如果路由需要控制权限
    if (route.meta && route.meta.requiresAuth) {
      // 判断用户是否有权限访问该路由
      if (permissions[route.meta.permissionKey]) {
        // 用户有权限，则把该路由加入到路由表中
        routes.push(route)
      }
    } else {
      // 如果不需要权限控制，则直接加入到路由表中
      routes.push(route)
    }
  }

  return routes
}

在这个函数中，我们可以看到，我们通过定义菜单项中的metaZum Beispiel können wir eine Route definieren, die den Zugriff basierend auf Benutzerberechtigungen steuern muss:

rrreee

In dieser Routing-Konfiguration definieren wir eine Route mit dem Namen requiresAuth meta von /code> wird verwendet, um dies als eine Route zu markieren, die Kontrollberechtigungen erfordert.

#🎜🎜#1.2 Steuerung im Routen-Interceptor #🎜🎜##🎜🎜# Ein Interceptor ist eigentlich ein Codestück, das zum Abfangen von Anforderungen und zum Ausführen bestimmter Vorgänge unter bestimmten spezifischen Umständen verwendet wird. In Vue können wir die Methode beforeEach verwenden, um Routing-Anfragen abzufangen und eine Berechtigungskontrolle durchzuführen. #🎜🎜##🎜🎜#Zum Beispiel können wir eine beforeEach-Methode wie folgt definieren: #🎜🎜#rrreee#🎜🎜#In diesem Interceptor ermitteln wir die Differenz zwischen der aktuellen Route, die benötigt wird auf das zugegriffen werden soll und das vorherige Das definierte meta-Attribut wird verwendet, um zu bestimmen, ob eine Berechtigungskontrolle erforderlich ist. Bei Bedarf führen wir eine Zugriffskontrolle basierend auf dem Anmeldestatus des Benutzers und anderen Informationen durch und springen bei Bedarf zur angegebenen Seite. #🎜🎜#

#🎜🎜#Backend-Steuerungsmethode#🎜🎜##🎜🎜##🎜🎜#Bei der Backend-Steuerungsmethode müssen wir die Rückgabe erhalten, indem wir eine Anfrage an das Backend senden Benutzerberechtigungsinformationen und führen Sie dann beim Generieren der Routing-Tabelle eine entsprechende Steuerung durch. #🎜🎜##🎜🎜#Wenn beispielsweise ein JWT-basiertes Backend /admin zurückgibt, sind für den Zugriff auf diese Route Administratorberechtigungen erforderlich. Wir können die Berechtigungsinformationen des Benutzers wie folgt abrufen: #🎜🎜# rrreee#🎜🎜#Nachdem wir die Berechtigungsinformationen des Benutzers erhalten haben, können wir die dynamische Routengenerierung von Vue Router und andere Funktionen verwenden, um die Routing-Tabelle dynamisch zu generieren. #🎜🎜##🎜🎜#Zum Beispiel können wir eine Funktion definieren, die dynamisch eine Routing-Tabelle wie folgt generiert: #🎜🎜#rrreee#🎜🎜#In dieser Funktion können wir sehen, dass wir den meta-Attribut, um zu markieren, welche Routen eine Berechtigungskontrolle erfordern. Beim Generieren der Routing-Tabelle bestimmen wir anhand der Berechtigungsinformationen des Benutzers, ob diese Routen zur Routing-Tabelle hinzugefügt werden müssen. Wenn keine Berechtigungskontrolle erforderlich ist, können wir sie direkt zur Routing-Tabelle hinzufügen. #🎜🎜##🎜🎜#Zusammenfassend lässt sich sagen, dass es zwei Hauptmethoden gibt, die Routing-Berechtigungssteuerung in Vue zu implementieren: Die eine besteht darin, sie am Frontend zu steuern, dh Routing-Tabellen dynamisch entsprechend unterschiedlichen Benutzerberechtigungen zu generieren Die Steuerung erfolgt über die Back-End-Schnittstelle, das heißt, das Front-End initiiert eine Anfrage an das Back-End und generiert die entsprechende Routing-Tabelle basierend auf den zurückgegebenen Berechtigungsinformationen. In der tatsächlichen Entwicklung können wir eine geeignete Methode zur Implementierung der Routing-Berechtigungssteuerung basierend auf bestimmten Projektbedingungen auswählen. #🎜🎜#

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung, wie Vue die Routing-Berechtigungskontrolle implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!