0

我有一个登录页面,我可以通过谷歌登录,当我登录时,我得到了用户的参数。问题是当我刷新页面时参数没有保存。

这是我的代码:

export default {
  name: "App",
  data() {
    return {
      isLogin: false,
    };
  },
  methods: {
    async logOut() {
      const result = await this.$gAuth.signOut();
      this.isLogin = false;
      console.log(`result`, result);
    },
    async login() {
      const googleUser = await this.$gAuth.signIn();
      console.log("googleUser", googleUser);
      console.log("getId", googleUser.getId());
      console.log("getBaseProfile", googleUser.getBasicProfile());
      console.log("getAuthResponse", googleUser.getAuthResponse());
      console.log(
        "getAuthResponse$G",
        this.$gAuth.GoogleAuth.currentUser.get().getAuthResponse()
      );
      this.isLogin = this.$gAuth.isAuthorized;
    },
  },
};
</script>

作为一种解决方案,我想将会话保存在 cookie 中,因此我尝试在我的代码中添加一个虚拟 cookie,如下所示:

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-cookies@1.7.4/vue-cookies.js"></script>


<template>
  <div id="app">
    <button @click="login()">Login</button>
    Is login: ? {{ isLogin }}
    <button @click="logOut()">LogOut</button>
  </div>
</template>

<script>

     
// Require dependencies
var Vue = require('vue');
var VueCookie = require('vue-cookie');
// Tell Vue to use the plugin
Vue.use(VueCookie);
// From some method in one of your Vue components
this.$cookie.set('test', 'Hello world!', 1);
// This will set a cookie with the name 'test' and the value 'Hello world!' that expires in one day
// To get the value of a cookie use
this.$cookie.get('test');
// To delete a cookie use
this.$cookie.delete('test');


export default {
  name: "App",
  data() {
    return {
      isLogin: false,
    };
  },
  methods: {
    async logOut() {
      const result = await this.$gAuth.signOut();
      this.isLogin = false;
      console.log(`result`, result);
    },
    async login() {
      const googleUser = await this.$gAuth.signIn();
      console.log("googleUser", googleUser);
      console.log("getId", googleUser.getId());
      console.log("getBaseProfile", googleUser.getBasicProfile());
      console.log("getAuthResponse", googleUser.getAuthResponse());
      console.log(
        "getAuthResponse$G",
        this.$gAuth.GoogleAuth.currentUser.get().getAuthResponse()
      );
      this.isLogin = this.$gAuth.isAuthorized;
    },
  },
};
</script>

但我得到了Uncaught TypeError: Vue.use is not a function

我究竟做错了什么?

有没有更好的方法来保存登录会话?

4

1 回答 1

1

我想你跳过了这一行: https ://github.com/alfhen/vue-cookie#installation

或者以很酷的方式将其加载到您的 main.js/app.js 中

您应该在启动Vue 实例VueCookie的文件中注册该插件。

见:https ://vuejs.org/v2/guide/plugins.html

于 2021-10-05T20:23:38.823 回答