How to elegantly implement WeChat authorized login in Vue3 project

Preface

WeChat authorized login is a topic that cannot be avoided when developing WeChat public accounts, and the implementation of the entire authorized login process requires the cooperation of the front-end and back-end. In the past, when the front-end and back-end were not separated, perhaps we on the front-end did not need to worry too much about the specific implementation of authorization. However, it is now 2021, and the front-end and back-end separation architecture is popular. How to implement WeChat authorized login when the front-end and back-end are separated has become the key issue to be discussed today.

Prepare

First of all, we still need to sort out the entire WeChat authorization process. Here I will directly move the official document:

If a user visits a third-party web page in the WeChat client, the official account can obtain the user's basic information through the WeChat web page authorization mechanism to implement business logic.

...

The difference between the two scopes of web page authorization

1. The web page authorization initiated with snsapi_base as the scope is used to obtain the openid of the user entering the page. It is a silent authorization and automatically jumps to the callback page. The user perceives that they have directly entered the callback page (usually a business page)

2. Web page authorization initiated with snsapi_userinfo as scope is used to obtain basic user information. However, this type of authorization requires the user's manual consent, and since the user has agreed, there is no need to pay attention to it, and the user's basic information can be obtained after authorization.

...

Specifically, the web authorization process is divided into four steps:

1. Guide the user to enter the authorization page to agree to the authorization and obtain the code

2. Exchange the code for access_token for web authorization (different from access_token in basic support)

3. If necessary, developers can refresh the web authorization access_token to avoid expiration

4. Obtain basic user information through web page authorization access_token and openid (support UnionID mechanism)

Attached here is the official document on WeChat authorization for WeChat public account development.

The above are some of the more critical information I have extracted. Of course, there are more explanations. I hope that novice readers will read the official documentation carefully first.

Let me add here that in the four steps of the above process, except for the first step, the other three steps need to be completed on the server side. The core of the front-end is actually how to check and judge the user's login status and maintain the login status.

Implementation ideas

As we all know, Vue is a product of the front-end and back-end separation technology solution. It is a pure front-end application (except for server-side rendering). Usually, when the user opens the page and executes the js script of the page, we need to asynchronously request the server data and then process and judge the relevant logic. The premise for us to implement WeChat authorized login is that we need to first determine whether the user needs to log in (cookie or token). When the user is not logged in, the authorization login process needs to be followed. When the authorization login is successful, we also need to record the login status on the front end to facilitate the page switching without triggering the authorization login again. Further analysis shows that what the front end can actually do is to obtain the code given to us by the WeChat server, and then give the code to our back end, so that the back end can complete the subsequent steps to obtain the user information and generate the user. Then I will summarize the whole process as follows:

1. (Front-end) Check if the user is logged in;
2. (Front-end) If not logged in, guide the user to the authorization page to agree to the authorization and obtain the code
3. (Front-end) Submit the obtained code to the back-end
4. (Backend) Exchange the code for the user credential openid
5. (Backend) Check if the user exists through openid, whether a new user needs to be registered, and obtain the user id
6. (Backend) Return user information;
7. (Front-end) Record the user's login status and jump back to the page before login;
   

I drew a picture of this process, as follows:

On the code

Based on the above ideas, now start the coding phase. The author uses Vue3, and Vue2 developers are requested to make appropriate adjustments according to the situation.
In order to facilitate the user authorization login logic, the author intends to seal the authorization login as a login page. The advantage of this is that we can directly jump to the login page through the push method of Vue Router wherever we judge that login is needed.

Normally, not all pages of our application require login to access. Only when accessing specific pages, users are required to log in. Then we need to identify which pages require login authentication. Here we can use the meta attribute of Vue Router for identification. The official document explains meta as follows:

Sometimes you may want to attach arbitrary information to a route, such as a transition name, who can access the route, etc. These things can be done by receiving the meta property of the properties object, which is accessible on both the route address and the navigation guard.

It just so happens that Vue Router officially has an example, as follows:

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // Pages that require login to access meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail,
        // Pages accessible to everyone meta: { requiresAuth: false }
      }
    ]
  }
]

Next, we can get this meta information in Vue Router's global guard beforeEach to make a login jump

router.beforeEach((to, from) => {
  // Instead of checking each route record // to.matched.some(record => record.meta.requiresAuth)
  if (to.meta.requiresAuth && !userStore.isLogin) {
    // This route requires authorization, please check if you are logged in // If not, redirect to the login page return {
      path: '/login',
      // Save our location so we can query again later: { redirect: to.fullPath },
    }
  }
})

What needs to be explained is the implementation of userStore.isLogin. This is related to the login state maintenance solution we actually adopt. If the token method is adopted, it is to check whether the token already exists. The author uses vuex to save tokens, and then uses plug-ins to persist the data in the Store to localStorage.

Next, let's look at the specific implementation:

login.vue: Login component

<template>
  <div class="login"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import { jump2Auth, getUserInfo } from '@/hooks/useWechatAuth'
import { userStore } from '@/store/modules/user'
import { redirectTo, getRouteQuery } from '@/hooks/usePage'

export default defineComponent({
  name: 'Login',
  setup() {
    let code = getRouteQuery().code as string
    // 3. If there is a code, it has been authorized if (code) {
      getUserInfo(code as string).then((res: any) => {
        //Record token
        userStore.saveToken(res.access_token)
        const redirect = userStore.userState.landPageRoute || '/'
        // Jump to the page visited before authorization redirectTo(redirect)
      })
    } else {
      // 1. Record the address of the previous page const { redirect } = getRouteQuery()
      if (redirect) {
        userStore.setLandPage(redirect as string)
      }
      // 2. Jump authorization const callbackUrl = window.location.origin + window.location.pathname
      jump2Auth(callbackUrl)
    }
  },
})
</script>

As you can see, the login page actually does not have any content. After jumping to this page, we will directly redirect to the WeChat authorization page. The authorization callback will also return to this page. At this time, we will obtain the code parameter by obtaining the routing parameter.

@/hooks/usePage.ts: This file mainly encapsulates common methods related to router

import router from '@/router'
import { cloneDeep } from 'lodash'
import { toRaw } from 'vue'

/**
 * Redirect * @param path path */
export function redirectTo(path: string) {
  const { replace } = router
  replace({
    path,
  })
}

/**
 * Get the query parameters on the route */
export function getRouteQuery() {
  const { currentRoute } = router
  const { query } = currentRoute.value
  return cloneDeep(query)
}

@/hooks/useWechatAuth.ts: This file encapsulates the WeChat authorization request for interaction with the backend

import { useAxios } from '@/hooks/useAxios'

/**
 * Get the redirect address authorized by WeChat* @param callbackUrl callback link after authorization* @returns
 */
export function jump2Auth(callbackUrl: string) {
  useAxios({
    url: '/api/wechat/auth',
    params: {
      redirect_url: callbackUrl,
    },
  }).then((authUrl: any) => {
    if (process.env.NODE_ENV === 'development') {
      window.location.href = callbackUrl + '?code=test'
    } else {
      window.location.href = authUrl
    }
  })
}

/**
 * Submit code to log in * @param code
 * @returns
 */
export async function getUserInfo(code: string) {
  const userInfo = await useAxios({
    method: 'POST',
    url: '/api/wechat/auth',
    params: {
      code,
    },
  })
  return userInfo
}

@/store/modules/user.ts: global state storage, mainly recording tokens and pages visited before login

import { Module, VuexModule, Mutation, getModule, Action } from 'vuex-module-decorators'
import store from '@/store'
import { initialUnencryptedStorage } from '../globals'

interface UserState {
  token: string
  landPageRoute: string
}

const NAME = 'user'
// name: module name // namespaced means opening the namespace // dynamic is set to true, which means creating a dynamic module and registering the module to the storage at runtime // preserveState If the data is persisted, the initial value can be taken from the storage when this variable is true @Module({
  namespaced: true,
  name: NAME,
  dynamic: true,
  store,
  preserveState: Boolean(initialUnencryptedStorage[NAME]),
})
export class User extends VuexModule {
  userState: UserState = {
    token: '',
    /** Visit page before logging in */
    landPageRoute: '',
  }

  get isLogin(): boolean {
    return !!this.userState.token
  }

 
  @Mutation
  saveToken(token: string): void {
    this.userState.token = token
  }

  @Mutation
  setLandPage(route: string): void {
    this.userState.landPageRoute = route
  }
}

export const userStore = getModule<User>(User)

The author uses the vuex-persistedstate plug-in to store the data in the store to localStorage. The advantage of this is that after the user closes the page, they can visit it again without re-triggering the WeChat authorization process, which greatly optimizes the user experience.

Summarize

I have to say that Vue3 is much more comfortable to write in terms of code abstraction and reuse. I hope everyone will try to follow the official practice, decouple the logic code and generate hooks one by one, so that the code will appear more elegant. The author has tried and demonstrated that this solution is almost perfect in terms of the neatness and elegance of the code and the realization of business needs (please allow me to show off). Of course, there may be bugs or pain points that I haven't discovered. After all, there is never a perfect architecture. I also welcome readers to discuss with me and provide better solutions and ideas.

This is the end of this article about elegantly implementing WeChat authorized login in Vue3 projects. For more relevant Vue3 WeChat authorized login content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!