vue+express根据是否有cookie,显示页面的问题,如图

登录前没有cookie,显示的是登录页面,

登录后有cookie,显示的是cookie.key信息,

另外我点退出的时候,可以显示登录页面,成功清除cookie

登录前,无cookie

问题: 点击刷新,就显示登录前的页面,此时还是有cookie,

clipboard.png

登录后,有cookie

clipboard.png

        <!-- 登录前页面 -->
        <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>
阅读 1.4k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题