Vueプロジェクトでユーザー認証と認可を実装する方法

Vue プロジェクトでユーザー認証と認可を実装する方法

近年、フロントエンド フレームワーク Vue が Web 開発の主流の選択肢になりつつあります。 Vue プロジェクトを開発する場合、ユーザーの認証と認可は必須の機能です。この記事では、Vue プロジェクトにユーザー認証と認可を実装する方法を技術実装の観点から詳しく紹介し、具体的なコード例を示します。

1. ユーザー認証

ユーザー認証とは、ユーザーがシステムにアクセスするための法的な権限を持っていることを確認するために、ユーザーの身元を確認するプロセスを指します。一般的なユーザー認証方法には、ユーザー名とパスワードの検証、サードパーティのログインなどが含まれます。以下では、例としてユーザー名とパスワードの検証を使用して、Vue プロジェクトでのユーザー認証の実装を紹介します。

1. ログイン ページ コンポーネントの作成

Vue プロジェクトでは、まずログイン ページ コンポーネントを作成する必要があります。このコンポーネントには、ユーザー名とパスワードの入力ボックスとログイン ボタンが含まれています。ユーザーがログインボタンをクリックすると、バックエンド API を呼び出して認証が実行されます。

サンプル コードは次のとおりです。

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名" />
    <input v-model="password" placeholder="请输入密码" type="password" />
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      // 调用登录API，验证用户名和密码
      // 如果验证成功，将用户信息存储到本地或会话存储中
    },
  },
};
</script>

2. ユーザー名とパスワードの確認

ログイン メソッドで、バックエンド API を呼び出して、ユーザー名とパスワードが正しいことを確認します。ユーザー名とパスワード。検証が成功した場合は、ユーザー情報をローカル ストレージまたはセッション ストレージに保存して、その後のアクセスと権限の制御を容易にすることができます。

サンプル コードは次のとおりです。

methods: {
  login() {
    // 调用登录API，验证用户名和密码的正确性
    api.login(this.username, this.password)
      .then(response => {
        const { token, userInfo } = response.data;
        // 将token和用户信息存储到本地存储或会话存储中
        localStorage.setItem('token', token);
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
        // 跳转到主页或其他需要认证的页面
        this.$router.push('/home');
      })
      .catch(error => {
        console.error('登录失败', error);
      });
  },
},

3. 認証戦略

ユーザー認証後、通常、承認が必要な各ページで認証を実行する必要があります。 . .ローカル ストレージまたはセッション ストレージ内のユーザー情報を確認することで、ユーザーにページへのアクセス権限があるかどうかを判断できます。

サンプル コードは次のとおりです:

beforeRouteEnter(to, from, next) {
  // 检查本地存储或会话存储中是否存在用户信息
  const userInfo = localStorage.getItem('userInfo');
  if (userInfo) {
    next();
  } else {
    // 用户未登录，跳转到登录页面
    next('/login');
  }
},

2. ユーザー承認

ユーザー承認とは、システム リソースに対するユーザーのアクセス権を決定することを指します。 Vue プロジェクトでは、ルーティング ガード メカニズムを通じてユーザー承認管理を実現できます。以下では、例としてルーティング ガードを使用して、Vue プロジェクトでのユーザー認証の実装を紹介します。

1. ルーティング テーブルを定義する

Vue プロジェクトで、権限制御が必要なページを含むルーティング テーブルを定義します。

サンプル コードは次のとおりです。

const routes = [
  {
    path: '/home',
    component: Home,
    // 需要进行权限控制的页面，在路由元信息中定义所需的角色
    meta: { requiresAuth: true, roles: ['admin', 'user'] },
  },
  // 其他路由...
];

2. ルート ガードでの承認

承認は、各ジャッジの前に Vue のナビゲーション ガードを介してルート ジャンプの前に実行されます。 。ユーザー情報に定義されたロール情報とルーティングメタ情報に基づいて、ユーザーにページへのアクセス権限があるかどうかを判断します。

サンプル コードは次のとおりです。

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth) {
    // 检查本地存储或会话存储中是否存在用户信息
    const userInfo = localStorage.getItem('userInfo');
    if (userInfo) {
      const { roles } = JSON.parse(userInfo);
      const requiredRoles = to.meta.roles;
      if (roles.some(role => requiredRoles.includes(role))) {
        // 用户具有访问页面的权限
        next();
      } else {
        // 用户权限不足，跳转到无权限页面
        next('/denied');
      }
    } else {
      // 用户未登录，跳转到登录页面
      next('/login');
    }
  } else {
    // 公开页面，无需授权
    next();
  }
});

上記のコード例を通じて、Vue プロジェクトにユーザー認証および認可機能を実装できます。ユーザー認証では、ユーザー名、パスワード、その他の情報を確認することにより、ユーザーの法的身元を保証します。ユーザー認証では、ルート ガード メカニズムを使用して、ルートがジャンプする前にユーザーがページにアクセスする権限を持っているかどうかを判断します。これらの関数の実装は、安全で信頼性の高い Vue プロジェクトを構築するのに役立ちます。

以上がVueプロジェクトでユーザー認証と認可を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。