The problem

This error popped up when using web page authorization in developer Tools. After comparing the authorized address with the demo provided by wechat official, the url of the jump is different, but the other urls are completely the same

A reason for

By looking at all the requests in this process, we finally found the cause of the problem: the order in which the interfaces were executed was out of order. Because the request is asynchronous, if a request (suppose A) is also sent at the same time before the token is obtained, it will appear that the login is successful, but the request a does not carry token, when the interface returns an error code, the Response interceptor is triggered and the authorization is issued to wechat again. At this point, graphical errors occur.

The solution

  • The interface A in problem this time has been written in app.vue, and the login logic has been placed in router.js. The solution is to remove interface A from app.vue and put it in the specific page where it is needed.
  • When similar problems occur, you can follow this method to detect whether there is a problem with the call order of the interface.