ユーザーログイン・認可機能を実装するUniAppの設計・開発実践-uni-app-php.cn

ユーザーログイン・認可機能を実装するUniAppの設計・開発実践

WBOY

リリース： 2023-07-06 16:02:18

オリジナル

2272 人が閲覧しました

UniApp は、Vue.js をベースに開発されたクロスプラットフォームアプリケーション開発フレームワークで、開発コードを一度コンパイルするだけで、iOS、Android、H5 などの複数プラットフォーム向けのアプリケーションを同時に生成できます。この記事では、UniApp にユーザーログインおよび承認機能を実装する設計と開発の実践を紹介し、コード例を通して説明します。

1. 機能設計
ユーザーのログインおよび承認機能は、最新のアプリケーションに不可欠な部分であり、その役割は、ユーザー ID の検証、ユーザーのプライバシーの保護、およびユーザーのアクセス権の制御です。ユーザーのログインおよび認可機能を実装するときは、次の側面を考慮する必要があります。

ユーザーの登録とログイン: ユーザーは、登録機能を通じて新しいアカウントを作成し、ログイン機能を通じて認証できます。
サードパーティログイン: WeChat、QQ、Weibo などのサードパーティアカウントを使用してユーザーがログインできるようにします。
承認管理: ユーザーのアクセス権を管理し、ユーザーのプライバシーを保護します。
情報ストレージ: ユーザーのログイン状態と関連情報を保存します。

2. 開発の実践
以下では、実用的なケースを使用して、UniApp にユーザーログインおよび承認機能を実装する方法を説明します。

ログインページの作成
まず、UniApp のページディレクトリの下に、ログイン関連のページを格納するログインディレクトリを作成します。ログインディレクトリにログインページのテンプレートとして login.vue ファイルを作成します。コードは次のとおりです:

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

<script>
  export default {
    data() {
      return {
        username: ''
      }
    },
    methods: {
      login() {
        // 登录操作
      }
    }
  }
</script>

<style>
  // 样式
</style>

ログイン後にコピー

ログインロジックの実装
login.vue ファイルでは、ユーザーのログイン操作を処理するために使用されるログインメソッドを作成しました。実際の開発では、ログインリクエストを送信することで認証を行い、ログイン結果に基づいて対応する処理を実行します。以下は簡単なサンプルコードです。

methods: {
  login() {
    // 发送登录请求
    api.login({
      username: this.username
    }).then(res => {
      // 登录成功
      // 将登录状态保存到本地
      uni.setStorageSync('token', res.data.token)
      // 跳转到首页
      uni.switchTab({
        url: '/pages/index/index'
      })
    }).catch(err => {
      // 登录失败
      uni.showToast({
        title: '登录失败',
        icon: 'none'
      })
    })
  }
}

ログイン後にコピー

サンプルコードでは、api と呼ばれるモジュールを使用してログインリクエストを送信します。ログインに成功したら、返されたトークンをローカルに保存し (uni.setStorageSync メソッドを使用)、uni.switchTab を通じてホームページにジャンプします。

承認管理
場合によっては、ユーザーのプライバシーを保護したり、ユーザーのアクセスを制限したりするために、特定のページまたは機能の権限を制御する必要があります。 UniApp では、グローバルナビゲーションガードを通じて権限制御を実装できます。以下に簡単なサンプルコードを示します。

// main.js
import Vue from 'vue'
import App from './App'

// 全局导航守卫
router.beforeEach((to, from, next) => {
  // 从本地获取登录状态
  const token = uni.getStorageSync('token')
  // 如果没有登录，跳转到登录页面
  if (!token && to.path !== '/login') {
    uni.navigateTo({
      url: '/pages/login/login'
    })
  } else {
    next()
  }
})

const app = new Vue({
  ...App
})
app.$mount()

ログイン後にコピー

このサンプルコードでは、グローバルナビゲーションガードの beforeEach メソッドを使用して、ログイン状態と対象ルーティングを判断して権限制御を行っています。ユーザーがログインしておらず、ターゲットルートがログインページではない場合は、ログインページにジャンプします。

サードパーティログイン
UniApp は、uexWeiXin プラグインを使用して WeChat ログインを実装するなど、さまざまなサードパーティログイン機能を実装するためのサードパーティプラグインの使用をサポートしています。以下は簡単なサンプルコードです:

methods: {
  login() {
    uexWeiXin.login({
      scope: 'snsapi_userinfo',
      state: 'uniapp',
      success: res => {
        const code = res.code
        // 发送登录请求
        api.loginByWeChat({
          code: code
        }).then(res => {
          // 登录成功
          // 将登录状态保存到本地
          uni.setStorageSync('token', res.data.token)
          // 跳转到首页
          uni.switchTab({
            url: '/pages/index/index'
          })
        }).catch(err => {
          // 登录失败
          uni.showToast({
            title: '登录失败',
            icon: 'none'
          })
        })
      }
    })
  }
}

ログイン後にコピー

サンプルコードでは、uexWeiXin プラグインのログインメソッドを使用して WeChat ログインを実装します。ログインに成功すると、返されたトークンをローカルに保存し、ホームページにジャンプします。

3. 概要
この記事の導入部を通じて、UniApp にユーザーログインと承認機能を実装する設計と開発の実践について学び、コード例を通じて説明しました。ユーザーのログインと認証は、最新のアプリケーションでは不可欠な機能であり、ユーザーのプライバシーとデータのセキュリティを保護し、ユーザーエクスペリエンスを向上させることができます。実際の開発では、UniAppが提供する開発ツールやプラグインをプロジェクトのニーズや実情に合わせて柔軟に活用することで、より強力で安全なユーザーログイン・認可機能を実現します。

以上がユーザーログイン・認可機能を実装するUniAppの設計・開発実践の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。