[day21]Vue实作-登出及会员功能实作

登出模式及未登入限制读取页面

navbar.vue调整

登出登入的切换调整
利用v-show来判断是否登入

调整button事件
包含会员资料页面连结及登入登出连结。

<b-nav-item  @click="gomenber" >Member-Center</b-nav-item>

<b-button size="sm" class="my-2 my-sm-0"  variant="outline-secondary" v-b-modal.login v-show="isLogin == 'no'" > Login/Register </b-button>

<b-button size="sm" class="my-2 my-sm-0"  variant="outline-secondary" @click="logout()"  v-show="isLogin == 'yes'"  > Log out </b-button>

script新增

    <script>
    export default {
      name: 'Navbar',
      props: {
        msg: String
      },
      data(){
        return{
          name:null,
          level:null,
          isLogin:'no', 
        }
      },
      methods:{
        logout(){ 
          sessionStorage.clear()
              Swal.fire({
              position: 'top-end',
              icon: 'info',
              title: 'you are already logged out',
              showConfirmButton: false,
              timer: 1500
            }).then(() => {
            window.location.reload() 
            });
        },

        gomenber(){
          let user = sessionStorage.getItem('user-info');
          if (user !== null) {
            this.$router.replace('user');
          } else {
              Swal.fire({
              position: 'center',
              icon: 'warning',
              title: 'Please Login or Register!',
              showConfirmButton: false,
              timer: 2000
            });
          }
        },
      },
      created(){
        let user=sessionStorage.getItem('user-info');
        console.log("created()"); 
        console.log(user); 
          if (user) {
            this.isLogin = 'yes';
          }
          else {
            this.isLogin = 'no';
          }
      } 
    }
    </script>

user.vue调整

新增Logout连结

<li>
  <a href="#">
    <i class="fa fa-sign-out-alt"></i>
    <span class="menu-text" @click="logout()">Logout</span>
  </a>
</li>

Logout事件

功能包含登入时呈现会员帐号及登出功能建置

<script>
export default {
  name: 'user',
  data(){
    return{
      email:null,
    }
  },
  methods:{
    closeMenu(){
      $(".page-wrapper").toggleClass("toggled");
    },
  logout(){ 
      sessionStorage.clear()
      //点选登出之後来到首页页面
      // .then(() => { 
          this.$router.replace('/'); 
      // })
      // .catch((err) => { 
      //     console.log(err); 
      // });
    },
  },
    created(){
    let user = sessionStorage.getItem('user-info');
    this.email = user.loginId;

  }
}
</script>