So verhindern Sie, dass die Seite ohne Anmeldung in Vue gerendert wird

In Vue kommt es häufig vor, dass die Seite nicht gerendert werden kann, wenn der Benutzer nicht angemeldet ist. Dieses Problem tritt häufig in praktischen Anwendungen auf, da Benutzer über entsprechende Berechtigungen verfügen müssen, um auf bestimmte Seiten zugreifen zu können.

Um dieses Problem zu lösen, können wir einen globalen Routing-Guard im Vue-Routing definieren, um das Rendern der Seite zu verhindern, wenn der Benutzer nicht angemeldet ist.

Im Folgenden stellen wir anhand konkreter Beispiele vor, wie diese Funktion implementiert wird.

Der erste Schritt besteht darin, Routing Guards zu definieren.

In Vue können wir die Zugriffsberechtigungen von Routen steuern, indem wir Routing Guards definieren. In diesem Prozess müssen wir eine Routing-Hook-Funktion namens „beforeEach“ verwenden, die vor jedem Routing-Switch aufgerufen wird.

Konkret können wir der Routendefinition den folgenden Code hinzufügen:

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem("token");  // 判断是否有登陆态
  if (to.meta.requireAuth) {  // 判断当前路由是否需要进行权限判断
    if (isLogin) {  // 已经登陆
      next();
    } else {  // 没有登陆，跳转到登陆页面
      next({
        path: "/login",
        query: {
          redirect: to.fullPath  // 记下跳转前的 url，为了登陆后自动跳转回原页面
        }
      });
    }
  } else {
    next();
  }
});

Im obigen Code ermitteln wir zunächst über „localStorage“, ob der Benutzer über einen Anmeldestatus verfügt, und ermitteln dann, ob für die aktuelle Route Berechtigungen erforderlich sind. Wenn eine Beurteilung erforderlich ist, der Benutzer jedoch nicht angemeldet ist, springen Sie zur Anmeldeseite und notieren Sie die URL der aktuellen Seite, um nach erfolgreicher Anmeldung automatisch zur Originalseite zurückzukehren.

Erwähnenswert ist, dass „localStorage“ eine neue Funktion in HTML5 ist, die eine Möglichkeit bietet, Daten auf der Clientseite zu speichern. Wenn wir uns erfolgreich anmelden, können wir das Token in „localStorage“ speichern, damit es bei nachfolgenden Routing-Entscheidungen verwendet werden kann.

Der zweite Schritt besteht darin, Routen zu definieren, die eine Genehmigungsbeurteilung erfordern.

Bei der Definition von Routen können wir das Feld „Meta“ verwenden, um zu markieren, ob die aktuelle Route eine Genehmigungsbeurteilung erfordert. Wenn eine Berechtigungsbeurteilung erforderlich ist, fügen Sie der Routendefinition den folgenden Code hinzu:

const router = new VueRouter({
  routes: [
    {
      path: "/home",
      name: "home",
      component: Home,
      meta: { requireAuth: true }  // 需要进行权限判断
    },
    {
      path: "/login",
      name: "login",
      component: Login
    }
  ]
});

Im obigen Code haben wir das Feld „meta: { requireAuth: true }“ zur Route hinzugefügt, die eine Berechtigungsbeurteilung erfordert, was darauf hinweist, dass eine Berechtigungsbeurteilung erforderlich ist .

Der dritte Schritt besteht darin, die Anmeldefunktion zu implementieren.

Abschließend müssen wir die Anmeldefunktion implementieren. Wenn sich der Benutzer erfolgreich anmeldet, muss das Token in „localStorage“ gespeichert und an die zuvor gespeicherte URL umgeleitet werden.

Konkret können wir der Anmeldeseite den folgenden Code hinzufügen:

methods: {
  login() {
    // 登陆成功后，存储 token
    localStorage.setItem("token", "userToken");

    // 重定向到之前存储的 url
    if (this.$route.query.redirect) {
      this.$router.push(this.$route.query.redirect);
    } else {
      this.$router.push("/");
    }
  }
}

Im obigen Code speichern wir nach erfolgreicher Anmeldung das Token in „localStorage“ und leiten zur zuvor gespeicherten URL weiter.

Zusammenfassung

Durch die oben genannten Schritte können wir die Routing-Berechtigungssteuerung in Vue problemlos implementieren. In praktischen Anwendungen können wir Routing-Guards flexibel entsprechend unseren eigenen Anforderungen konfigurieren, um einen komplexeren Berechtigungskontrollmechanismus zu erreichen.

Im Allgemeinen wird Vue häufig in Front-End-Frameworks verwendet, und auch die Routing-Steuerung von Vue ist ein sehr wichtiger Aspekt. Man kann sagen, dass die obige Methode für die Routing-Berechtigungssteuerungslösungen von Vue sehr repräsentativ ist. Es lohnt sich, sie zu erlernen, wenn Sie die Routing-Berechtigungssteuerung von Vue erlernen.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass die Seite ohne Anmeldung in Vue gerendert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!