无法在Vue中保存登录会话

Question

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

这是我的代码:

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。

我做错了什么?

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

Answer 1

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

或做它的冷却方式和加载在你main.js/app.js

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

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