Vue WeChatプロジェクトのオンデマンド認証ログインの実践事例を詳しく解説

今回は、VueWeChatプロジェクトのオンデマンド認証ログインの実践事例について詳しく説明します。 Vue WeChatプロジェクトでオンデマンド認証ログインを実装するための注意事項は次のとおりです。 、見てみましょう。

このプロジェクトでは、開発フレームワークとして Vue を使用します。ユーザーがページを閲覧する場合は 2 つの状況があります。

1. 1 つは、ユーザーが閲覧を続ける前にログインする必要がある場合です。もう 1 つは、ユーザーが閲覧できる場合です。ログインせずに自由に。

2. ユーザーログイン

   を必要としないページでは、ユーザー情報が必要な操作が行われる場合があります。この場合、ユーザーは以降の操作を実行する前にログインする必要があります。したがって、認可ログインポリシーを区別する必要があります。

アイデア

1. 一般的に、WeChat 用に開発した H5 ページは、ページに入るときに認証を必要とし、閲覧を続ける前にユーザーにログインを要求します。ただし、製品要件のため、このプロジェクトでは、さまざまなページの認証戦略を分割し、一般的なものと特殊なものに従って設計する必要があります。 2. 一般に、ユーザーはページに入ったらすぐにログインを認証する必要があります。通常の WeChat 認証プロセスに従ってログインし、ログイン後、ユーザーは閲覧を続けます。

3. 特別な場合には、ユーザーのログインを必要としないページのホワイトリストを設定し、ユーザーのログイン

ステータス

を検出する関数を入力せずに、ホワイトリストに存在する

route

を入力するだけでページを直接レンダリングします。

ユーザーがログインしていない状態でユーザー情報を必要とする操作については、現時点での私の理解では、たとえWeChatベースのサイレント認証であってもページを更新する必要があり、真にシームレスな認証を実現して続行することは不可能です。ユーザーの操作。したがって、ユーザーが認証プロセスを理解できるように、フロントエンド レベルでよりわかりやすいプロンプトを表示することにしました。欠点は、以前の操作では認証されたログインしかトリガーされず、ユーザーは再度操作を実行する必要があることです。

// routerRule.js
export default function routerRule (router, whiteList = []) {
  // other codes...
  router.beforeEach( (to, from, next ) => {
    // 因为授权登录涉及异步操作，因此使用promise，成功的回调中调用next函数
    new Promise((resolve, rejects) => {
      if ( whiteListRouter.indexOf(to.path) !== -1 ) {
        resolve()
        return
       }
      // 常规页面授权登录过程
      if (hasToken()) {
        // codes，获取用户信息并且跳转所需跳转的页面
      } else {
        // 判断用户是否已经进行微信授权
        if (hasAuthed()) {
          // 进行过微信授权之后，重定向回来的url中包含了微信的授权信息，可以将url上截取的参数发送到服务器，换取用户的token，随后进入上述有token时候的步骤
          getWechatUserInfo().then(res => {
            resolve()
          })
        } else {
          // 用户尚未进行微信授权，则调用微信授权的方法，进行授权登录。
          getWechatAuth()
        }
      }
    }).then( res => {
      next()
    })
  })
  router.afterEach(( to, from ) => {
    wxShare({ title: to.meta.title, desc: to.meta.shareDesc, link: to.meta.shareLink, logo: to.meta.shareLogo})
   })
}

このプロジェクトは、ユーザーが最初にWeChatにバインドするときに、ユーザーのWeChat情報をこのサイトのユーザー情報にバインドするため、ユーザーのWeChat認証情報を取得した後、ユーザーのトークンを取得できるため、ユーザーの他のユーザーを取得できます。このサイトの情報。

ページにログインせずに権限が必要な操作を処理する

上記のロジックによると、ホワイトリストに入った後、関数全体が返されており、次の認証プロセスには入りません。ただし、このようなページ上で許可が必要な操作を行う場合は、認可ログイン処理を起動し、認可後にユーザー情報も併せて取得する必要があります。

// checkLogin.js
export function checkLogin({ redirectUrl, wxAuthLoading, wxAuthLoaded, callback } = {}) {
  if (getToken()) {
    // ...
    callback && callback()
  } else {
    // 提示用户正在授权中
    wxAuthLoading && wxAuthLoading()
    getWechatAuth( redirectUrl || window.location.href ).then( res => {
      // 授权完毕，提示用户授权成功
      wxAuthLoaded && wxAuthLoaded()
    })
  }
}

同時に、ルーティングのホワイトリストにいくつかの操作を追加する必要があります

// routerRule.js
export default function routerRule (router, whiteList = []) {
  // other codes...
  router.beforeEach( (to, from, next ) => {
    // 因为授权登录涉及异步操作，因此使用promise，成功的回调中调用next函数
    new Promise((resolve, rejects) => {
      if ( whiteListRouter.indexOf(to.path) !== -1 ) {
        // 如果已经进行微信授权但是没有token值的，就调用以下函数获取token值
        if ( !hasToken() && hasAuthed() ) {
          getWechatUserInfo().then(res => {
            resolve()
          })
        }
        resolve()
        return
       }
      // 常规页面授权登录过程
      if (hasToken()) {
        // codes，获取用户信息并且跳转所需跳转的页面
      } else {
        // 判断用户是否已经进行微信授权
        if (hasAuthed()) {
          // 进行过微信授权之后，重定向回来的url中包含了微信的授权信息，可以将url上截取的参数发送到服务器，换取用户的token，随后进入上述有token时候的步骤
          getWechatUserInfo().then(res => {
            resolve()
          })
        } else {
          // 用户尚未进行微信授权，则调用微信授权的方法，进行授权登录。
          getWechatAuth()
        }
      }
    }).then( res => {
      next()
    })
  })
  // other codes...
}

ピットと欠陥

1 このソリューションでは、ユーザーの承認後、ルートジャンプの前に、最初にユーザーを取得する必要があります。そうしないと、URL 上の WeChat 認証情報が失われ、ユーザー情報の取得に失敗します。 2. このソリューションの欠点は、開発者がログイン不要ページ上のすべての権限が必要な操作に対して checkLogin 判定を追加する必要があることです。このアクセス許可が必要な操作には通常、非同期リクエストの送信が含まれるため、不要な非同期リクエストを減らすことを考慮しない場合は、リクエスト メソッドにインターセプターを設定して、バックエンドによって返されるコードを判断できます。コードにログインすると、WeChat 認証が実行されます。このアプローチは開発プロセスではより便利ですが、ユーザーがログインしていないときに不要なリクエストがバックエンドに送信されるため、良くありません。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue プロジェクトをサーバーにパッケージ化する方法

ウェブストームを使用して *.vue ファイルを追加する方法

以上がVue WeChatプロジェクトのオンデマンド認証ログインの実践事例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。