Vue authorization login implementation method

This time I will bring you the implementation method of Vue authorized login. What are the precautions for Vue authorized login? The following is a practical case, let's take a look.

The project uses Vue as the development framework. There are two situations when users browse the page:

1. One requires users to log in before they can continue browsing;

2. The other is that users can browse at will without logging in.

Pages that do not require

user login may contain operations that require user information. In this case, the user needs to log in before subsequent operations can be performed. Therefore, authorization login policies need to be distinguished.

Thinking

1. Generally speaking, the H5 page we develop for WeChat requires authentication when entering the page, requiring the user to You must log in to continue browsing. However, due to product requirements, for this project we need to divide the authentication strategies of different pages and design them according to general and special:

2. In general, users are required to authorize login as soon as they enter the page. According to the routine WeChat authorized login process. After logging in, the user continues browsing.

3. In special cases, configure a whitelist for pages that do not require user login. Just enter the

route that exists in the whitelist and do not enter the function that detects user login status , render the page directly.

For operations that require user information when the user is not logged in, according to my current understanding, even if it is a silent authorization based on WeChat, the page must be refreshed, and it is impossible to achieve truly senseless authorization and continue the user operation. Therefore, I chose to give the user a more friendly prompt at the front-end level to let the user understand the authorization process. The disadvantage is that the previous operation only triggered the authorized login. After the authorized login, the user needs to perform the operation again.

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

This project is to bind the user's WeChat information with the user information of this site when the user first binds to WeChat. Therefore, after obtaining the user's WeChat authorization information, the user can be obtained token to obtain the user’s other user information on this site.

Processing operations that require permissions without logging in to the page

According to the above logic, after entering the whitelist, the entire function has been If you return it, you will not enter the following authentication process. However, if you perform operations that require permissions on such a page, you need to trigger the authorization login process, and after authorization, user information must be obtained together.

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

At the same time, we need to add some operations to the routing whitelist

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

Pits and imperfections

1. In this solution, after user authorization, user information must be obtained before routing jump, otherwise the WeChat authorization information on the URL will be lost and obtaining user information will fail.

2. The disadvantage of this solution is that the developer needs to add checkLogin to all operations that require permissions on the login-free page. Since this permission-requiring operation generally involves sending asynchronous requests, if you do not consider reducing unnecessary asynchronous requests, you can set an interceptor on the request method to determine the code returned by the backend. If the returned code is If the user has not logged in to the code, WeChat authorization will be performed. This approach is more convenient in the development process, but it will send some unnecessary requests to the backend when the user is not logged in, which is not good.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Quick implementation of array deduplication method in PHP

Detailed explanation of JS callback function use cases

The above is the detailed content of Vue authorization login implementation method. For more information, please follow other related articles on the PHP Chinese website!