Comment contrôler les autorisations dans Vue ?

Avec le développement continu de la technologie front-end, de plus en plus de frameworks front-end sont utilisés dans les applications Web, et l'un des plus remarquables est Vue. Vue est un framework facile à comprendre et à utiliser, largement utilisé dans le développement d'applications Web. Dans la plupart des applications Web, le contrôle des autorisations est un élément crucial. Comment contrôler les autorisations dans Vue est devenu un problème très critique.

Cet article expliquera comment effectuer le contrôle des autorisations dans Vue, notamment :

1. Qu'est-ce que le contrôle des autorisations ?
2. Comment contrôler les autorisations dans Vue ?
3. Exemple de démonstration

Qu'est-ce que le contrôle des autorisations ?

Le contrôle des autorisations est un concept très important, particulièrement important dans les applications Web. En termes simples, le contrôle des autorisations consiste à diviser les utilisateurs en différentes catégories et à attribuer les autorisations utilisateur correspondantes à chaque catégorie. De cette façon, les utilisateurs ne peuvent accéder qu’au contenu qu’ils autorisent. Le contrôle des autorisations peut améliorer la sécurité et la stabilité des applications et rendre les données plus sécurisées et plus fiables.

Comment contrôler les autorisations dans Vue ?

Il existe généralement deux façons de contrôler les autorisations dans Vue : la première consiste à contrôler au niveau du routage et la seconde consiste à contrôler au niveau des composants. Ces deux méthodes seront présentées une par une ci-dessous.

1. Contrôle du niveau de routage

Contrôle au niveau du routage Les autorisations de l'utilisateur peuvent être définies dans les métadonnées de routage, puis vérifiées dans la fonction de garde de routage. Si les autorisations de l'utilisateur actuel répondent aux exigences de cet itinéraire, la stratégie continue, sinon elle accède à une autre page.

Ce qui suit est un exemple de 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() // 如果不需要登录权限，直接进入页面
  }
});

Dans le code ci-dessus, les deux attributs requireAuth et rôles sont définis dans les métadonnées de la route requireAuth indique que la route nécessite une connexion utilisateur pour y accéder, et les rôles indiquent des rôles. avec accès restreint. Les autorisations de l'utilisateur peuvent être vérifiées dans la fonction beforeEach route guard. Si l'utilisateur est autorisé à accéder à l'itinéraire, accédez à la page, sinon passez à d'autres pages. De cette manière, le contrôle des autorisations peut être effectué au niveau du routage.

2. Contrôle au niveau des composants

Contrôle au niveau des composants, vous pouvez utiliser les instructions Vue pour contrôler l'affichage et le masquage des composants. Par exemple, vous pouvez définir un attribut d'autorisation pour chaque composant, puis déterminer dans l'instruction si l'utilisateur actuel a l'autorisation d'accéder au composant. Si tel est le cas, affichez le composant, sinon masquez-le.

Ce qui suit est un exemple de composant :

<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>

Dans le code ci-dessus, utilisez la directive v-if pour déterminer si l'utilisateur actuel a l'autorisation d'accéder au composant, et définissez l'affichage et le masquage du composant en fonction de la autorisations. De cette manière, les autorisations peuvent être contrôlées au niveau des composants.

Exemple de démonstration

Ce qui suit est un exemple de démonstration qui montre comment effectuer le contrôle des autorisations dans Vue.

Supposons que vous ayez une application Web qui contient deux pages : une page d'accueil qui nécessite que l'utilisateur se connecte pour y accéder et une page de connexion. Contrôle au niveau du routage, le code est le suivant :

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

Dans le code ci-dessus, deux routes sont définies : home et login, où la route home nécessite que l'utilisateur se connecte pour accéder, tandis que la route de connexion ne nécessite pas de connexion . Une fois la connexion réussie, les informations utilisateur sont enregistrées dans le stockage local du navigateur et le plug-in vue-auth-plugin est utilisé pour gérer le statut de l'utilisateur.

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

Dans le code ci-dessus, axios est utilisé pour envoyer la demande de connexion après succès, les informations utilisateur sont enregistrées dans le stockage local du navigateur et le plug-in vue-auth-plugin est utilisé pour gérer le statut de l'utilisateur. Vous pouvez utiliser la méthode Vue.auth.loggedIn() pour vérifier si l'utilisateur est connecté. Si true est renvoyé, cela signifie que l'utilisateur est connecté.

Affichez les informations utilisateur et le bouton de déconnexion sur la page d'accueil, le code est le suivant :

<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>

Dans le code ci-dessus, utilisez la méthode localStorage.getItem() pour obtenir les informations utilisateur enregistrées dans le stockage local, puis affichez l'utilisateur informations et bouton de déconnexion. Utilisez la méthode Vue.auth.logout() pour vous déconnecter et accéder à la page de connexion après succès.

Résumé

Vue est un framework frontal Web très puissant. Lorsqu'il s'agit du contrôle des autorisations, il peut être contrôlé au niveau du routage et au niveau des composants. Vous pouvez choisir la méthode appropriée en fonction de la situation réelle. Dans les applications pratiques, certains détails doivent encore être pris en compte, tels que la gestion des informations utilisateur, l'accès entre domaines, etc. Mais tant que vous maîtrisez les principes de base du contrôle des autorisations, vous pouvez facilement implémenter le contrôle des autorisations dans 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!