javascript - Vue（Quasar）谷歌登录按钮问题

Question

我一直在尝试让我的 google 登录按钮与 Vue-Quasar 框架一起使用。我已经到了可以使用我的谷歌帐户登录的地步，但是我无法处理具有 gapi.signin2.render 的“onsuccess”选项，我已经尝试了这篇文章中的解决方案。还有一些类似的方法，但它们都不能用于调用函数'onSignIn'。

这是我的实际代码：

  async created() {
    sessionStorage.removeItem("Session");
    //this.init();
  },
   mounted() {
    window.onSignIn = this.onSignIn();

    //this.render();
      /*  window.gapi.signin2.render('g-signin2', {
        scope: 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile',
        width: 250,
        height: 50,
        longtitle: true,
        theme: 'dark',
        onsuccess: this.onSignIn
    })*/

    this.init();

  },
  methods: {
    login: async function() {
      let alert = false;
      console.log("login to back");
      const data = {
        username: this.user,
        password: this.password
      };
      let url = "http://localhost:8080/user/login";
      const axiospost = await this.$axios
        .post(url, data, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          let decodedtoken = jwt_decode(response.data);
          this.$token = "asd";
          let split = response.data.split("&");
          sessionStorage.setItem("Session", split[1]);
          if (decodedtoken.role === "ADMIN") {
            this.$router.push("/admin");
          } else if (decodedtoken.role === "EMPLOYEE") {
            this.$router.push("/main");
          }
        })
        .catch(function(error) {
          alert = true;
        });
      this.alert = alert;
    },
   

      onSignIn(user) {
        console.log("signin");
        console.log(user);
        //do stuff here with user
      },


      init: function() { //onload esto
      console.log(window.gapi);
      console.log(" ^^^window.gapi");
      //storageremove();
      if (!localStorage.getItem("access_token")) {
          window.gapi.load('auth2', () => {
            this.render()
              /*let auth2 = window.gapi.auth2.getAuthInstance({
                  client_id: 'GOOGLE ID',
                  scope: 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile'
              });*/
          });
          //this.render();

      } else {
          document.querySelector("#g-signin2").style.display = "none";
          sessionStorage.setItem("authok",true);
      }
    },

   render: async function() {
        window.gapi.signin2.render('g-signin2', {
            scope: 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile',
            width: 250,
            height: 50,
            longtitle: true,
            theme: 'dark',
            onsuccess: this.onSignIn
        })
             console.log("render gapi");

        console.log(window.gapi);
    }

  }
};

我留下了注释行，因为它们也是我尝试过的，因为我尝试了很多不同的方法来调用它。我需要工作的是渲染方法的“成功”部分。

标签： javascriptvue.jsgoogle-signinquasar