Comment empêcher le rendu de la page sans connexion dans vue

Dans Vue, nous rencontrons souvent des situations où la page ne peut pas être rendue lorsque l'utilisateur n'est pas connecté. Ce problème est courant dans les applications pratiques car les utilisateurs doivent disposer des autorisations correspondantes pour accéder à des pages spécifiques.

Afin de résoudre ce problème, nous pouvons définir un garde de routage global dans le routage de Vue pour interdire le rendu de la page lorsque l'utilisateur n'est pas connecté.

Ci-dessous, nous présenterons comment implémenter cette fonction avec des exemples spécifiques.

La première étape consiste à définir des gardes de routage

Dans Vue, nous pouvons contrôler les autorisations d'accès aux itinéraires en définissant des gardes de routage. Dans ce processus, nous devons utiliser une fonction de hook de routage nommée "beforeEach", qui sera appelée avant chaque commutateur de routage.

Plus précisément, nous pouvons ajouter le code suivant à la définition de l'itinéraire :

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();
  }
});

Dans le code ci-dessus, nous déterminons d'abord si l'utilisateur a un statut de connexion via "localStorage", puis déterminons si l'itinéraire actuel nécessite des autorisations. Si un jugement est requis mais que l'utilisateur n'est pas connecté, accédez à la page de connexion et enregistrez l'URL de la page actuelle afin de revenir automatiquement à la page d'origine après une connexion réussie.

Il convient de mentionner que "localStorage" est une nouvelle fonctionnalité de HTML5, qui permet de stocker des données côté client. Lorsque nous nous connectons avec succès, nous pouvons stocker le jeton dans « localStorage » afin qu'il puisse être utilisé dans les décisions de routage ultérieures.

La deuxième étape consiste à définir les itinéraires qui nécessitent un jugement d'autorisation

Lors de la définition des itinéraires, nous pouvons utiliser le champ "méta" pour indiquer si l'itinéraire actuel nécessite un jugement d'autorisation. Si un jugement d'autorisation est requis, ajoutez le code suivant à la définition de la route :

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

Dans le code ci-dessus, nous avons ajouté le champ "meta: { requireAuth: true }" à la route qui nécessite un jugement d'autorisation, indiquant qu'un jugement d'autorisation est requis .

La troisième étape consiste à implémenter la fonction de connexion

Enfin, nous devons implémenter la fonction de connexion lorsque l'utilisateur se connecte avec succès, le jeton doit être stocké dans "localStorage" et redirigé vers l'URL précédemment stockée.

Plus précisément, nous pouvons ajouter le code suivant à la page de connexion :

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

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

Dans le code ci-dessus, après une connexion réussie, nous stockons le jeton dans "localStorage" et redirigeons vers l'URL précédemment stockée.

Résumé

Grâce aux étapes ci-dessus, nous pouvons facilement implémenter le contrôle des autorisations de routage dans Vue. Dans les applications pratiques, nous pouvons configurer de manière flexible les gardes de routage en fonction de nos propres besoins pour obtenir un mécanisme de contrôle des autorisations plus complexe.

En général, Vue est largement utilisé dans les frameworks front-end, et le contrôle de routage de Vue est également un aspect très important. La méthode ci-dessus peut être considérée comme très représentative des solutions de contrôle des autorisations de routage de Vue. Cela vaut la peine d'être apprise pour ceux qui apprennent le contrôle des autorisations de routage de Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!