Vue で権限を制御するにはどうすればよいですか?

フロントエンド テクノロジの継続的な開発に伴い、Web アプリケーションで使用されるフロントエンド フレームワークがますます増えています。その中で最も優れたフレームワークの 1 つが Vue です。 Vue は、Web アプリケーションの開発で広く使用されている、わかりやすく使いやすいフレームワークです。ほとんどの Web アプリケーションでは権限の制御が重要な部分であり、Vue で権限を制御する方法は非常に重要な問題となっています。

この記事では、Vue で権限制御を実行する方法について説明します。

1. 権限制御とは何ですか?
2. Vue で権限を制御するにはどうすればよいですか?
3. デモの例

権限制御とは何ですか?

アクセス許可制御は非常に重要な概念であり、特に Web アプリケーションにおいて重要です。簡単に言えば、権限制御とは、ユーザーをさまざまなカテゴリに分割し、各カテゴリに対応するユーザー権限を割り当てることです。これにより、ユーザーは自分が許可したコンテンツのみにアクセスできるようになります。アクセス許可制御により、アプリケーションのセキュリティと安定性が向上し、データの安全性と信頼性が高まります。

Vue で権限を制御するにはどうすればよいですか?

Vue で権限を制御するには通常 2 つの方法があります。1 つ目はルーティング レベルで制御する方法、2 つ目はコンポーネント レベルで制御する方法です。以下では、これら 2 つの方法を 1 つずつ紹介します。

1. ルーティング レベルの制御

ルーティング レベルでの制御。ユーザー権限はルーティング メタデータ メタで設定し、ルーティング ガード機能で確認できます。現在のユーザーの権限がこのルートの要件を満たしている場合はポリシーが続行され、そうでない場合は別のページに移動します。

次はルーティングの例です:

// 定义路由
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() // 如果不需要登录权限，直接进入页面
  }
});

上記のコードでは、requireAuth とロールの 2 つの属性がルートのメタデータ メタに設定されています。requireAuth は、ルートがユーザーを必要とすることを示します。アクセスする前にログインしてください。roles は制限付きアクセスの役割を表します。ユーザーの権限は、beforeEach ルートガード機能で確認でき、ユーザーがルートへのアクセス権限を持っている場合はそのページに入り、そうでない場合は他のページにジャンプします。このようにして、ルーティングレベルで許可制御を実行できます。

2. コンポーネント レベルの制御

コンポーネント レベルでの制御。Vue 命令を使用してコンポーネントの表示と非表示を制御できます。たとえば、各コンポーネントに権限属​​性を設定し、現在のユーザーがコンポーネントにアクセスする権限を持っているかどうかを命令で判断できます。権限がある場合はコンポーネントを表示し、そうでない場合はコンポーネントを非表示にします。

以下はコンポーネントの例です:

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

上記のコードでは、v-if ディレクティブを使用して、現在のユーザーがコンポーネントにアクセスする権限を持っているかどうかを確認し、表示を設定します。権限に基づいてコンポーネントを表示します。このようにして、アクセス許可をコンポーネント レベルで制御できます。

デモンストレーションの例

次は、Vue で権限制御を実行する方法を示すデモンストレーションの例です。

ユーザーがアクセスするためにログインを必要とするホームページとログイン ページの 2 つのページを含む Web アプリケーションがあるとします。ルーティング レベルでの制御のコードは次のとおりです。

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

上記のコードでは、home と login の 2 つのルートが定義されています。home ルートではユーザーがアクセスするためにログインする必要があり、ログイン ルートではユーザーがアクセスする必要があります。ログインは必要ありません。ログインに成功すると、ユーザー情報はブラウザのローカル ストレージに保存され、vue-auth-plugin プラグインを使用してユーザーのステータスが管理されます。

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

上記のコードでは、axios を使用してログイン リクエストを送信します。成功後、ユーザー情報はブラウザのローカル ストレージに保存され、vue-auth-plugin プラグインを使用してログイン リクエストが送信されます。ユーザーのステータス。 Vue.auth.loggedIn() メソッドを使用して、ユーザーがログインしているかどうかを確認できます。 true が返された場合は、ユーザーがログインしていることを意味します。

ホームページにユーザー情報とログアウト ボタンを表示するコードは次のとおりです。

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

上記のコードでは、localStorage.getItem() メソッドを使用して、ローカルストレージ情報を表示し、ユーザー情報とログアウトボタンを表示します。 Vue.auth.logout() メソッドを使用してログアウトし、成功したらログイン ページにジャンプします。

概要

Vue は非常に強力な Web フロントエンド フレームワークであり、権限制御を扱う場合、ルーティング レベルとコンポーネント レベルで制御でき、状況に応じて適切な方法を選択できます。実際の状況に。実際のアプリケーションでは、ユーザー情報の管理、クロスドメイン アクセスなど、注意が必要な詳細がまだいくつかあります。ただし、基本的な権限制御の原則をマスターしていれば、Vue で簡単に権限制御を実装できます。

以上がVue で権限を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。