Implementierungsmethode für die Vue-Autorisierungsanmeldung

Dieses Mal werde ich Ihnen die Implementierungsmethode für die autorisierte Vue-Anmeldung vorstellen. Was sind die Vorsichtsmaßnahmen für die autorisierte Vue-Anmeldung?

Das Projekt verwendet Vue als Entwicklungsframework. Es gibt zwei Situationen, in denen Benutzer die Seite durchsuchen:

1. Eine besteht darin, dass sich der Benutzer zuerst anmelden muss, bevor er fortfahren kann Durchsuchen;

2. Das andere ist, dass Benutzer nach Belieben durchsuchen können, ohne sich anzumelden.

Seiten, die keine Benutzeranmeldung erfordern, können Vorgänge enthalten, die Benutzerinformationen erfordern. In diesem Fall muss sich der Benutzer anmelden, bevor nachfolgende Vorgänge ausgeführt werden können. Daher müssen Autorisierungs-Anmelderichtlinien unterschieden werden.

Ideen

1 Im Allgemeinen erfordert die H5-Seite, die wir für WeChat entwickeln, eine Authentifizierung beim Betreten der Seite, sodass der Benutzer dies tun muss Melden Sie sich an, um mit dem Surfen fortzufahren. Aufgrund der Produktanforderungen müssen wir für dieses Projekt jedoch die Authentifizierungsstrategien verschiedener Seiten aufteilen und sie nach allgemeinen und besonderen Kriterien gestalten:

2. Im Allgemeinen müssen Benutzer die Anmeldung autorisieren, sobald sie dies tun Betreten Sie die Seite gemäß dem routinemäßigen WeChat-Anmeldevorgang. Nach der Anmeldung surft der Benutzer weiter.

3. Konfigurieren Sie in besonderen Fällen eine Whitelist für Seiten, die keine Benutzeranmeldung erfordern. Geben Sie einfach die Route ein, die in der Whitelist vorhanden ist, und geben Sie nicht die Funktion ein, die die Benutzeranmeldung erkennt status , rendern Sie die Seite direkt.

Für Vorgänge, die Benutzerinformationen erfordern, wenn der Benutzer nicht angemeldet ist, muss die Seite nach meinem derzeitigen Verständnis aktualisiert werden, selbst wenn es sich um eine stille Autorisierung auf WeChat-Basis handelt, und dies ist nicht wirklich möglich sinnlose Autorisierung und setzen Sie den Benutzerbetrieb fort. Daher habe ich mich dafür entschieden, den Benutzern auf der Front-End-Ebene benutzerfreundlichere Eingabeaufforderungen zu geben, damit die Benutzer den Autorisierungsprozess verstehen. Der Nachteil besteht darin, dass der vorherige Vorgang nur eine autorisierte Anmeldung auslöste. Nach der autorisierten Anmeldung muss der Benutzer den Vorgang erneut ausführen.

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

Dieses Projekt verknüpft die WeChat-Informationen des Benutzers mit den Benutzerinformationen dieser Website, wenn der Benutzer zum ersten Mal eine Verbindung zu WeChat herstellt. Daher kann der Benutzer nach Erhalt der WeChat-Autorisierungsinformationen des Benutzers ein Token erhalten, um die anderen Informationen des Benutzers zu erhalten Benutzerinformationen auf dieser Website.

Verarbeitungsvorgänge, für die Berechtigungen ohne Anmeldeseite erforderlich sind

Gemäß der obigen Logik wurde nach Eingabe der Whitelist die gesamte Funktion Wenn Wenn Sie es zurücksenden, wird der folgende Authentifizierungsprozess nicht durchgeführt. Wenn jedoch auf einer solchen Seite ein Vorgang ausgeführt wird, für den eine Genehmigung erforderlich ist, muss der Autorisierungs-Anmeldevorgang ausgelöst werden und nach der Autorisierung müssen die Benutzerinformationen zusammen abgerufen werden.

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

Gleichzeitig müssen wir einige Vorgänge zur Routing-Whitelist hinzufügen

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

Die Fallstricke und Unvollkommenheiten

1. Bei dieser Lösung müssen nach der Benutzerautorisierung Benutzerinformationen vor dem Routing-Sprung abgerufen werden, andernfalls gehen die WeChat-Autorisierungsinformationen auf der URL verloren und das Abrufen der Benutzerinformationen schlägt fehl.

2. Der Nachteil dieser Lösung besteht darin, dass der Entwickler die checkLogin-Beurteilung für alle erlaubnispflichtigen Vorgänge auf der Seite ohne Anmeldung hinzufügen muss. Da dieser berechtigungspflichtige Vorgang im Allgemeinen das Senden asynchroner Anforderungen umfasst, können Sie, wenn Sie nicht erwägen, unnötige asynchrone Anforderungen zu reduzieren, einen Interceptor für die Anforderungsmethode festlegen, um den vom Backend zurückgegebenen Code zu ermitteln. Wenn der Benutzer dies nicht getan hat Wenn Sie sich mit dem Code anmelden, wird die WeChat-Autorisierung durchgeführt. Dieser Ansatz ist im Entwicklungsprozess praktischer, sendet jedoch einige unnötige Anforderungen an das Backend, wenn der Benutzer nicht angemeldet ist, was nicht gut ist.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Schnelle Implementierung der Array-Deduplizierungsmethode in PHP

Detaillierte Erläuterung der Anwendungsfälle der JS-Rückruffunktion

Das obige ist der detaillierte Inhalt vonImplementierungsmethode für die Vue-Autorisierungsanmeldung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!