Wie kontrolliere ich Berechtigungen in Vue?

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie werden immer mehr Front-End-Frameworks in Webanwendungen verwendet, und eines der herausragendsten ist Vue. Vue ist ein leicht verständliches und benutzerfreundliches Framework, das häufig bei der Entwicklung von Webanwendungen eingesetzt wird. In den meisten Webanwendungen ist die Berechtigungskontrolle ein entscheidender Bestandteil. Die Steuerung von Berechtigungen in Vue ist zu einem sehr kritischen Thema geworden.

In diesem Artikel wird erläutert, wie Sie die Berechtigungskontrolle in Vue durchführen, einschließlich:

1. Was ist Berechtigungskontrolle?
2. Wie steuere ich Berechtigungen in Vue?
3. Beispieldemonstration

Was ist Berechtigungskontrolle?

Berechtigungskontrolle ist ein sehr wichtiges Konzept, besonders wichtig in Webanwendungen. Einfach ausgedrückt besteht die Berechtigungskontrolle darin, Benutzer in verschiedene Kategorien zu unterteilen und jeder Kategorie entsprechende Benutzerberechtigungen zuzuweisen. Auf diese Weise können Benutzer nur auf Inhalte zugreifen, die sie zulassen. Die Berechtigungskontrolle kann die Sicherheit und Stabilität von Anwendungen verbessern und Daten sicherer und zuverlässiger machen.

Wie steuere ich Berechtigungen in Vue?

Es gibt normalerweise zwei Möglichkeiten, Berechtigungen in Vue zu steuern: Die erste ist die Steuerung auf Routing-Ebene und die zweite ist die Steuerung auf Komponentenebene. Diese beiden Methoden werden im Folgenden einzeln vorgestellt.

1. Routing-Level-Kontrolle

Benutzerberechtigungen können im Routing-Metadaten-Meta festgelegt und dann in der Routing-Guard-Funktion überprüft werden. Wenn die Berechtigungen des aktuellen Benutzers die Anforderungen dieser Route erfüllen, wird die Richtlinie fortgesetzt, andernfalls wird zu einer anderen Seite navigiert.

Das Folgende ist ein Beispiel für eine Route:

// 定义路由
const routes = [
  {
    path: '/home', // 路径
    name: 'home', // 路由名称
    component: Home, // 路由对应的组件
    meta: {
      requireAuth: true, // 需要用户权限
      roles: ['admin', 'guest'] // 受访问限制的角色
    }
  },
  {
    path: '/login', // 路径
    name: 'login', // 路由名称
    component: Login // 路由对应的组件
  }
];

// 创建路由实例
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
});

// 添加路由前置守卫
router.beforeEach((to, from, next) => {
  // 判断该路由是否需要登录权限
  if (to.meta.requireAuth) {
    // 如果需要，则校验用户是否已经登录
    if (Vue.auth.loggedIn()) {
      // 判断当前用户是否有访问该路由的权限
      if (to.meta.roles.indexOf(Vue.auth.getUserRole()) !== -1) {
        next() // 用户有访问权限，直接进入页面
      } else {
        next('/denied') // 跳转到其他页面
      }
    } else {
      // 如果用户未登录，则跳转到登录页面
      next('/login')
    }
  } else {
    next() // 如果不需要登录权限，直接进入页面
  }
});

Im obigen Code sind die beiden Attribute „requireAuth“ und „roles“ in den Metadaten der Route festgelegt. „requireAuth“ gibt an, dass für den Zugriff auf die Route eine Benutzeranmeldung erforderlich ist, und „roles“ gibt Rollen an mit eingeschränktem Zugang. Benutzerberechtigungen können in der Funktion beforeEach Route Guard überprüft werden. Wenn der Benutzer die Berechtigung zum Zugriff auf die Route hat, rufen Sie die Seite auf, andernfalls springen Sie zu anderen Seiten. Auf diese Weise kann die Berechtigungskontrolle auf Routing-Ebene durchgeführt werden.

2. Steuerung auf Komponentenebene

Steuerung auf Komponentenebene: Sie können Vue-Anweisungen verwenden, um das Anzeigen und Ausblenden von Komponenten zu steuern. Sie können beispielsweise für jede Komponente ein Berechtigungsattribut festlegen und dann in der Anweisung festlegen, ob der aktuelle Benutzer die Berechtigung zum Zugriff auf die Komponente hat. Wenn ja, zeigen Sie die Komponente an, andernfalls blenden Sie sie aus.

Das Folgende ist ein Beispiel für eine Komponente:

<template>
  <div v-if="allow">
    This is a component that requires authentication.
  </div>
  <div v-else>
    You are not authorized to view this component.
  </div>
</template>

<script>
export default {
  data() {
    return {
      allow: false
    };
  },
  mounted() {
    // 获取当前用户的权限，并根据权限设置组件的显示和隐藏
    if (Vue.auth.getCurrentUserRole() === "admin") {
      this.allow = true;
    }
  }
};
</script>

Verwenden Sie im obigen Code die v-if-Anweisung, um zu bestimmen, ob der aktuelle Benutzer die Berechtigung zum Zugriff auf die Komponente hat, und legen Sie die Anzeige und das Ausblenden der Komponente basierend auf fest Berechtigungen. Auf diese Weise können Berechtigungen auf Komponentenebene gesteuert werden.

Beispieldemonstration

Das Folgende ist eine Beispieldemonstration, die zeigt, wie die Berechtigungskontrolle in Vue durchgeführt wird.

Angenommen, Sie haben eine Webanwendung, die zwei Seiten enthält: eine Homepage, für deren Zugriff sich der Benutzer anmelden muss, und eine Anmeldeseite. Steuerung auf Routing-Ebene, der Code lautet wie folgt:

const routes = [
  {
    path: "/home",
    name: "home",
    component: Home,
    meta: {
      requireAuth: true,
      roles: ["admin", "guest"]
    }
  },
  {
    path: "/login",
    name: "login",
    component: Login
  }
];

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (Vue.auth.loggedIn()) {
      if (to.meta.roles.indexOf(Vue.auth.getUserRole()) !== -1) {
        next();
      } else {
        next("/denied");
      }
    } else {
      next("/login");
    }
  } else {
    next();
  }
});

Im obigen Code sind zwei Routen definiert: Home und Login, wobei die Home-Route eine Anmeldung des Benutzers erfordert, um darauf zuzugreifen, während die Login-Route keine Anmeldung erfordert . Nach erfolgreicher Anmeldung werden die Benutzerinformationen im lokalen Speicher des Browsers gespeichert und das Plug-in vue-auth-plugin wird zur Verwaltung des Benutzerstatus verwendet.

Vue.use(VueAuth, {
  auth: {
    login(req) {
      const username = req.body.username;
      const password = req.body.password;
      return axios.post("/api/login", {username, password}).then(res => {
        const data = res.data;
        localStorage.setItem("user", JSON.stringify(data.user));
        this.user.authenticated = true;
        return true;
      });
    },
    logout() {
      localStorage.removeItem("user");
      this.user.authenticated = false;
      return Promise.resolve();
    }
  },
  http: axios,
  tokenType: "Bearer",
  tokenName: "Authorization",
  storageType: "localStorage",
  user: {
    roles: JSON.parse(localStorage.getItem("user")).roles
  }
});

Im obigen Code wird Axios zum Senden der Anmeldeanforderung verwendet. Nach Erfolg werden die Benutzerinformationen im lokalen Speicher des Browsers gespeichert und das Vue-Auth-Plugin-Plug-In wird zum Verwalten des Benutzerstatus verwendet. Sie können die Methode Vue.auth.loggedIn() verwenden, um zu überprüfen, ob der Benutzer angemeldet ist. Wenn „true“ zurückgegeben wird, bedeutet dies, dass der Benutzer angemeldet ist.

Zeigen Sie Benutzerinformationen und die Schaltfläche zum Abmelden auf der Startseite an. Der Code lautet wie folgt:

<template>
  <div>
    <h1>Hello, {{ user.name }}</h1>
    <h2>Your role is {{ user.role }}</h2>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user"))
    };
  },
  methods: {
    logout() {
      Vue.auth.logout().then(() => {
        this.$router.push("/login");
      });
    }
  }
};
</script>

Verwenden Sie im obigen Code die Methode localStorage.getItem(), um die im lokalen Speicher gespeicherten Benutzerinformationen abzurufen, und zeigen Sie dann den Benutzer an Informationen und Abmelden-Button. Verwenden Sie die Methode Vue.auth.logout(), um sich abzumelden und nach Erfolg zur Anmeldeseite zu springen.

Zusammenfassung

Vue ist ein sehr leistungsfähiges Web-Front-End-Framework, das auf Routing-Ebene und Komponentenebene gesteuert werden kann. Sie können die geeignete Methode entsprechend der tatsächlichen Situation auswählen. In praktischen Anwendungen müssen noch einige Details beachtet werden, z. B. Benutzerinformationsverwaltung, domänenübergreifender Zugriff usw. Solange Sie jedoch die grundlegenden Prinzipien der Berechtigungskontrolle beherrschen, können Sie die Berechtigungskontrolle problemlos in Vue implementieren.

Das obige ist der detaillierte Inhalt vonWie kontrolliere ich Berechtigungen in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!