登出模式及未登入限制讀取頁面

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>
  

畫面呈現

1. 偵測是否有使用者顯示登入/登出
   
   2.拒絕未登入使用者登入會員頁
   
   3.登出
   

小結

目前簡單的登入頁面已經簡單地完成了!!
接下來應該是到了訂單的階段了
繼續加油