If wechat code authorization is performed in hash mode, the return path will become

http://localhost:8080/? code=**********&state=123#/login
Copy the code

The normal history mode is

http://localhost:8080/login? code=**********&state=123
Copy the code

Processing method

Splice routes, because if you do not splice routes.

1- Interface request error Content-Type cross-domain; 2- The page jumps because the hash pattern is identified by the hash sign

created() {
    // Determine whether wechat is authorized to return
    console.log("route".this.$route.query);
    let url = window.location.href;
    if (url.indexOf("code") != -1) {
      if (url.substr(-7) = ="#/login") {
        let url1Index = url.indexOf("?");
        let url1 = url.substring(0, url1Index);
        let url2 = url.substring(url1Index, url.length - 7);
        let url3 = url.substr(-7);
        let urlAll = url1.concat(url3, url2);
        window.location.href = urlAll;
      } else {
        this.state = this.$route.query.state;
        let code = this.$route.query.code; }}},Copy the code

You can get the parameters without restitching the URL.

Well, I don’t know under what circumstances splicing would not be done, probably some,

        / / for the state
        let stateIndex = url.indexOf("state");
        let state = url.substring(stateIndex + 6, url.indexOf("#"));
        / / access code
        let codeIndex = url.indexOf("code");
        let code = url.substring(codeIndex + 5, url.indexOf("&"));

Copy the code

WeChat authorization

Appid is changed to its own, redirect_uri is set to the public domain name, encodeURIComponent is used to handle # in hash mode, and state is returned as the carrying parameter

redirectToWxUrl() {
      let redirect_uri = encodeURIComponent(
        `${process.env.VUE_APP_URL}/#/login`
      );
      // let scope = "snsapi_base
      let scope = "snsapi_userinfo"; // Not concerned about popbox authorization Is concerned about silent authorization
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx228b25db23e7a878&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=The ${this.userPhone}#wechat_redirect`;
    }
Copy the code