登录前没有cookie,显示的是登录页面,
登录后有cookie,显示的是cookie.key信息,
另外我点退出的时候,可以显示登录页面,成功清除cookie
登录前,无cookie
问题: 点击刷新,就显示登录前的页面,此时还是有cookie,

登录后,有cookie

<!-- 登录前页面 -->
<div v-show="cookieInfo == ''">
<!-- 登录 -->
<div class="right-item login">
<h1>登录</h1>
<div class="warnInfo">
{{warnInfo}}
</div>
<div class="input-box">
<p>用户名:</p>
<input type="text" v-model="username">
</div>
<div class="input-box">
<p>密码:</p>
<input type="password" v-model="password">
</div>
<button type="button" @click="login">登录</button>
</div>
</div>
<!-- 登录后页面 -->
<div class="right-item logined" v-show="cookieInfo !== ''">
<!-- <div v-show="Logined"> -->
<h1>你好,{{userInfo.username}}</h1>
<p v-if="userInfo.isAdmin === true">
你是管理员,可以进入后台管理
</p>
<p v-else>欢迎来到我的博客</p>
<p @click="logout">退出</p>
<!-- </div> -->
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data(){
return{
Login: true,
Register: false,
userInfo: '',
username: '',
password: '',
password2: '',
warnInfo: '',
cookieInfo:''
}
},
methods:{
login(){
if(this.username == ''){
if(this.warnInfo = '用户名不能为空');
return;
}
if(this.password == ''){
if(this.warnInfo = '密码不能为空');
return;
}
this.$http.post('/users/login', {
username: this.username,
password: this.password
}).then((res => {
if(res.data.code == 1){
this.warnInfo = res.data.message;
return;
}else{
console.log(res.data);
this.userInfo = res.data.userInfo;
// this.userInfo = !this.userInfo
this.Login = false;
console.log(document.cookie);
this.cookieInfo = document.cookie;
}
}))
},
logout(){
this.$http.get('/users/logout').then((res => {
console.log(res.data);
this.userInfo = !this.userInfo;
this.Login = true;
console.log(document.cookie);
this.cookieInfo = '';
}))
}
}
}
</script>