Vue WeChat認証ログインにおけるフロントエンドとバックエンドの分離の問題を解決する方法

この記事では主に、Vue WeChat 認証ログインのフロントエンドとバックエンドを分離するための詳細でエレガントなソリューションを紹介します。内容は非常に優れているので、参考として共有します。

WeChat 認証ログインは非常に一般的なシナリオであり、WeChat 認証ログインを使用すると、ユーザーの一部の情報を簡単に取得し、

WeChat 認証された公式アカウントのユーザー固有の openid を通じてユーザーの ID をバインドするデータベースを確立できます。ログイン 仕組みについては、ここでは詳しく説明しませんが、簡単に説明すると、ユーザーがクリックして確認すると、WeChat はコールバック ページにジャンプします。コールバック ページ URL は code パラメーターを運びます。バックエンドは、openid またはユーザー情報をサポートする代わりにコードを使用できます。vue プロジェクトでは、通常、SPA アプリケーションです。つまり、すべてのページが同じ HTML です。通常、現在の開発ではフロントエンドとフロントエンドが完全に分離されており、vue はパッケージ化されています。後から生成される純粋な静的ファイルはサーバーを経由することさえできないため、バックエンドを経由するのはあまりエレガントではありません。この記事では、このようなシナリオでの WeChat 認証ログインについて紹介します

Vue SPA アプリケーションの場合、通常、WeChat 公式アカウントでは複数のメニューが Vue のルーティング ページに対応するように設定することがあります。すべてのページにアクセスするためにユーザーの承認が必要なわけではありません。一部のページは、ユーザーがログインせずにプレビューする必要があります。現時点では、vue ルーターを使用してフロントエンド ルート インターセプトを実装できます

 router.beforeEach(async (to, from, next) => {
 if (to.matched.some(recode => recode.meta.noAuth)) {
  next()
 } else {
  // store已存在用户信息直接进入页面
  if (store.state.userInfo.nickname) {
   next()
   return
  }
  const code = getUrl(window.location.href).code // 截取url上的code ,可能没有,则返回''空字符串
  let res = await api.post('/imsl/user/user-auth', [code]) // 获取用户信息,后端可首先通过cookie,session等判断,没有信息则通过code获取
  console.log(res)
  // 返回用户信息
  if (res.code === 200 && res.data.is_auth) {
   store.commit('setUserInfo', res.data)
   next()
  } else {
   // 此状态根据业务需求 可能不存在
   if (res.code === 201) {
    const openid = res.data.openid
    console.log(openid)
    store.commit('setOpenid', openid)
    localStorage.setItem('openid', openid)
    next('/enlist-info')
   }
   // 上面的获取用户信息接口,如果cookie,session拿不到用户信息,且传递的code为空,则跳转到微信授权页面
   if (res.code === 202) {
    console.log(window.location.origin)
    console.log(to.fullPath)
    // 这个redirectUrl用 当前页路径或者tof.fullPath(将要进入的路径)
    let redirectUrl = window.location.href
    redirectUrl = encodeURIComponent(redirectUrl)
    console.log(redirectUrl)
    const appid='wxdff0642c2120ea39'
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
   }
  }
 }
})

上記のコードは、基本的に承認プロセスを説明しています。まず、vue ルーティングを設定するときに、このルートがログインを必要とするかどうかを設定します。つまり、router の meta:true 属性に noAuth を追加します。これは、ログインを必要としないページの処理に使用されます。router.beforeEach によって判断されます。ログインが必要ないページの場合は、noAuth で直接 next() を実行し、ログインが必要なページの場合は、バックエンドでユーザー情報を取得するインターフェイスを作成し、フロントエンドでそのページにアクセスします。ユーザー情報を取得するためにインターフェイスを直接呼び出す必要はありません。一度取得した後は、ユーザー情報が vuex に保存されるため、vuex にユーザー情報があるかどうかを確認します。情報がすでに存在する場合は、ページに入ります。ユーザー情報がない場合は、バックエンド インターフェイスを呼び出してユーザー情報を取得します。この時点で、最後に、ユーザー情報は WeChat を通じて取得されます。この時点でバックエンドはどのようにユーザー情報を取得するのでしょうか? ここで、ユーザーが自分の ID をバインドした後、バックエンドは Cookie やトークンなどを設定することでユーザーのログイン ステータスを保存できます。初めて入力する場合、または Cookie やトークンなどが期限切れの場合、バックエンドは関連するステータスを直接返すことができます。上記のコードで述べたように、WeChat が呼び出されてログインが許可されます。 3 種類の状況、

1. Cookie、トークンなどを通じて、バックエンドはユーザー情報を直接取得し、ページに直接入ります。

2. 現時点ではユーザー情報がありません。そのため、ログインを許可するには WeChat を再度呼び出す必要があります。 code=201 と code= 202. code=2 の場合、フロントエンドは WeChat 認証ページに直接ジャンプします。redirectUri は、これから入力するページです。このとき、WeChat 認証ページにジャンプし、ユーザーは戻ります。違いは、この時点で URL にすでにコードが含まれており、フロントエンドが文字列インターセプトを通じてコードを取得し、バックエンドにコードを送信できることです。

概要:

プロジェクトは、フロントエンドとバックエンドの完全な分離方法を採用しています。つまり、アクセス時に純粋な静的ファイルがサーバー上に配置されます。 Index.html

1. では、バックエンドが WeChat 認証ログイン ページにジャンプする必要はありません。実装方法は次のとおりです。

2. フロントエンドは、ルーター経由で入るためにユーザーIDを必要とするページをインターセプトします。このとき、バックエンドは、まずユーザー情報を取得するためのインターフェースを呼び出します。 202 を返すと、フロントエンドは WeChat 認証ページにジャンプします。リダイレクトリは、ジャンプ認証後に入力するページの URL です。 WeChat は URL 上のコードを運び、現在のページに戻ります。このとき、フロントエンドは URL 上のコードをインターセプトし、バックエンドでコード処理を通じてユーザー情報を取得します。バックエンド、openid などで認証ログインを実現します

3. 以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Vueでのルーティング後の空白ページの問題の解決方法

Vueでの$refsの使用

vueとvueのフォーム検証機能の実装について-検証者

以上がVue WeChat認証ログインにおけるフロントエンドとバックエンドの分離の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。