Comment implémenter une connexion autorisée à la demande pour le projet Vue WeChat

Cette fois, je vais vous montrer comment mettre en œuvre une connexion autorisée à la demande pour le projet VueWeChat et quelles sont les précautions pour mettre en œuvre une connexion autorisée à la demande pour le projet Vue WeChat. Ce qui suit est un cas pratique.

Le projet utilise Vue comme cadre de développement. Il existe deux situations dans lesquelles les utilisateurs parcourent la page :

1. La première est que l'utilisateur doit d'abord se connecter avant de continuer. parcourir ;

2. L'autre est que les utilisateurs peuvent naviguer à volonté sans se connecter.

Les pages qui ne nécessitent pas de connexion utilisateur peuvent contenir des opérations qui nécessitent des informations utilisateur. Dans ce cas, l'utilisateur doit se connecter avant que les opérations suivantes puissent être effectuées. Par conséquent, les politiques de connexion d’autorisation doivent être distinguées.

Idées

1 De manière générale, la page H5 que nous développons pour WeChat nécessite une authentification lors de l'entrée dans la page, obligeant l'utilisateur à Vous devez. connectez-vous pour continuer à naviguer. Cependant, en raison des exigences du produit, pour ce projet, nous devons diviser les stratégies d'authentification des différentes pages et les concevoir en fonction de celles générales et spéciales :

2 En général, les utilisateurs doivent autoriser la connexion dès qu'ils le souhaitent. entrez dans la page. Selon le processus de connexion autorisé de routine de WeChat. Une fois connecté, l'utilisateur continue de naviguer.

3. Dans des cas particuliers, configurez une liste blanche pour les pages qui ne nécessitent pas de connexion utilisateur. Entrez simplement la route qui existe dans la liste blanche et n'entrez pas la fonction qui détecte la connexion utilisateur <.>status , affiche la page directement.

Pour les opérations qui nécessitent des informations utilisateur lorsque l'utilisateur n'est pas connecté, selon ma compréhension actuelle, même s'il s'agit d'une autorisation silencieuse basée sur WeChat, la page doit être actualisée, et il est impossible d'y parvenir véritablement autorisation insensée et poursuivre l’opération de l’utilisateur. Par conséquent, j'ai choisi de donner aux utilisateurs des invites plus conviviales au niveau du front-end pour permettre aux utilisateurs de comprendre le processus d'autorisation. L'inconvénient est que l'opération précédente n'a déclenché qu'une connexion autorisée, l'utilisateur doit effectuer à nouveau l'opération.

// 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})
   })
}

Ce projet lie les informations WeChat de l'utilisateur aux informations utilisateur de ce site lorsque l'utilisateur se connecte pour la première fois à WeChat. Par conséquent, après avoir obtenu les informations d'autorisation WeChat de l'utilisateur, vous pouvez obtenir Obtenez le jeton de l'utilisateur pour obtenir. les autres informations utilisateur de l'utilisateur sur ce site.

Opérations de traitement nécessitant des autorisations sans page de connexion

Selon la logique ci-dessus, après être entré dans la liste blanche, toute la fonction a été Si vous le renvoyez, vous n’entrerez pas dans le processus d’authentification suivant. Cependant, si vous effectuez des opérations nécessitant des autorisations sur une telle page, vous devez déclencher le processus de connexion par autorisation et, après autorisation, les informations utilisateur doivent être obtenues ensemble.

// 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()
    })
  }
}

En même temps, nous devons ajouter quelques opérations à la liste blanche de routage

// 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...
}

Puits et imperfections

1. Dans cette solution, après l'autorisation de l'utilisateur, les informations de l'utilisateur doivent être obtenues avant le saut d'itinéraire. Sinon, les informations d'autorisation WeChat sur l'URL seront perdues et l'obtention des informations de l'utilisateur échouera.

2. L'inconvénient de cette solution est que le développeur doit ajouter le jugement checkLogin pour toutes les opérations nécessitant une autorisation sur la page sans connexion. Étant donné que cette opération nécessitant une autorisation implique généralement l'envoi de requêtes asynchrones, si vous n'envisagez pas de réduire les requêtes asynchrones inutiles, vous pouvez définir un intercepteur sur la méthode de requête pour déterminer le code renvoyé par le backend si l'utilisateur ne l'a pas fait. connecté au code, l'autorisation WeChat sera effectuée. Cette approche est plus pratique dans le processus de développement, mais elle enverra des requêtes inutiles au backend lorsque l'utilisateur n'est pas connecté, ce qui n'est pas bon.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Le projet vue est empaqueté et envoyé au serveur

Implémentation JS de la fonction simple de panier d'achat analyse de code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!