uniapp で権限管理とユーザー ID 認証を実装する方法

uniapp で権限管理とユーザー ID 認証を実装する方法

モバイル インターネットの急速な発展に伴い、ユーザー ID 認証と権限管理を必要とするアプリケーションがますます増えています。これらの機能を uniapp に実装することはそれほど複雑ではありませんが、この記事では具体的な実装方法とコード例を紹介します。

1. ユーザー本人認証

ユーザー本人認証とは、ユーザーがアプリケーションを安全かつ正常に使用できることを保証するために、ユーザーがログインするときにアプリケーションがユーザーの身元の正当性を検証することを意味します。

1. 認証ページの作成

まず、ユーザーがユーザー名とパスワードを入力するためのログイン ページを作成する必要があります。ページ間のジャンプは、uniapp のページジャンプ機能を使用して実現できます。

2. ユーザー ID の確認

ログイン ページで、ユーザーがユーザー名とパスワードを入力すると、ユーザー名とパスワードは検証のためにバックエンド サーバーに送信されます。 uniappのネットワークリクエスト機能。バックエンドサーバーは、トークンベースの認証、Cookie ベースの認証など、さまざまな認証方法を使用できます。この例では、トークンベースの認証方法を使用して説明します。

ユーザーのユーザー名とパスワードが正しいことを確認した後、バックエンド サーバーはトークンを生成し、クライアントにトークンを返します。トークンを受信した後、クライアントはその後の権限検証のためにトークンをローカルに保存できます。

3. アクセス許可の検証にトークンを使用する

ユーザーが制限されたページへのアクセスや制限された操作の実行など、他の操作を実行するときに、uniapp を使用できます。インターセプター メカニズムのチェックトークンがローカルに存在するかどうか。トークンが存在する場合、アクセス許可を確認するために、リクエスト ヘッダーを介してトークンをバックエンド サーバーに送信できます。バックエンド サーバーは、トークンの有効性に基づいて、ユーザーが操作を実行する権限を持っているかどうかを判断します。

2. 権限管理

権限管理とは、ユーザーの ID と役割に基づいて、特定の機能とリソースへのユーザーのアクセスと操作を制限することを指します。たとえば、管理者はユーザーの管理や記事の編集などが可能ですが、一般ユーザーは記事の閲覧のみなどが可能です。

1. ロールと権限の定義

まず、ロールと権限の関係を定義する必要があります。データベースまたは構成ファイルを使用して、ロールと権限間の対応関係を保存できます。 uniapp では、フロントエンド フレームワーク vuex を使用して、ユーザーのロールと権限の情報を保存および管理できます。

2. ルーティング ガードの設定

uniapp では、ルーティング ガードを通じて権限管理を実現できます。ルート ガードは、ユーザーのルートがジャンプする前に検証して、ユーザーにページへのアクセス許可があるかどうかを判断します。

ルーティング設定では、ルートのメタ フィールドを設定して、ルートに必要な許可情報を保存できます。ルートがジャンプする前に、vuex を通じてユーザーの権限情報を取得し、ルートのメタ フィールドに基づいてユーザーがページにアクセスする権限を持っているかどうかを判断できます。許可がない場合は、他のページにジャンプしたり、プロンプトを表示したりできます。

コードサンプル:

1. ユーザー認証を実装するコードサンプル:

// ログインページ

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

<script><br>デフォルトのエクスポート {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { username: '', password: '' }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>},<br> メソッド: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>login() { uni.request({ url: 'http://example.com/login', method: 'POST', data: { username: this.username, password: this.password }, success(res) { // 登录成功，保存token uni.setStorageSync('token', res.data.token) } }) }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>

2. 権限管理を実装するコード例:

// ルート設定
const Routes = [{

path: '/admin',
component: Admin,
meta: {
  requireAuth: true, // 需要登录才能访问
  roles: ['admin'] // 需要admin角色才能访问
}

},
{

path: '/user',
component: User,
meta: {
  requireAuth: true // 需要登录才能访问
}

}
]

/ /ルート ガード
router.beforeEach((to、from、next) => {
if (to.meta.requireAuth) {

// 需要登录才能访问
const token = uni.getStorageSync('token')
if (token) {
  // 有token，继续跳转
  const roles = store.state.roles
  if (to.meta.roles && to.meta.roles.length > 0 && roles.length > 0) {
    // 需要权限验证
    if (roles.some(role => to.meta.roles.includes(role))) {
      // 有权限，继续跳转
      next()
    } else {
      // 没有权限，跳转到其他页面
      next('/403')
    }
  } else {
    // 不需要权限验证
    next()
  }
} else {
  // 没有token，跳转到登录页面
  next('/login')
}

} else {

// 不需要登录，继续跳转
next()

}
})

上記のコード例を通じて、uniapp の権限管理とユーザー ID 認証の機能を実現できます。開発者は、実際のニーズに応じて適切な変更や拡張を行うことができます。

以上がuniapp で権限管理とユーザー ID 認証を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。