[ Update ] 更新 navbar 清單 根據 角色 顯示清單

劉鈞霖

2021-11-15 cd4a64b39c429f2f5b45cb042d1b66f1cd3904cd

 PAMapp/components/NavBar.vue

@@ -9,7 +9,7 @@
        </div>
        <div class="pam-header__action-bar">
          <i class="icon-bell text--dark-blue cursor--pointer" @click="$router.push('/notification')"></i>
          <el-dropdown @command="handleCommand">
          <!-- <el-dropdown @command="handleCommand">
            <i class="icon-avatar text--dark-blue cursor--pointer"></i>
            <el-dropdown-menu slot="dropdown" class="pam-header__dropdown">
              <li class="pam-header__dropdown-item" @click="$router.push('/login')">登入</li>
@@ -19,6 +19,21 @@
              <li class="pam-header__dropdown-item">登出</li>
              <li class="pam-header__dropdown-item pam-header__dropdown-divider" @click="$router.push('/consultantLogin')">顧問登入</li>
            </el-dropdown-menu>
          </el-dropdown> -->

          <el-dropdown>
            <i class="icon-avatar text--dark-blue cursor--pointer"></i>
            <el-dropdown-menu slot="dropdown" class="pam-header__dropdown">
              <template v-for="(navbarItem,index) in navBarList">
                <li class="pam-header__dropdown-item" 
                  :class="{'pam-header__dropdown-divider':navbarItem.title === '顧問登入'}" 
                  v-if="navbarItem.needRole.includes(loginRole)" 
                  :key="index" 
                  @click="linkTo(navbarItem.link)">
                    {{navbarItem.title}}
                </li>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
    </header>
@@ -26,12 +41,71 @@

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

import * as _ from 'lodash';
@Component
export default class NavBar extends Vue {
  handleCommand() {

  navBarList=[
    {
      needRole:[Role.NOT_LOGIN],
      link:'/login',
      title:'登入',
    },
    {
      needRole:[Role.USER],
      link:'/accountSetting',
      title:'個人帳號設定',
    },
    {
      needRole:[Role.ADMIN],
      link:'/notFinish',
      title:'查看帳號資訊',
    },
    {
      needRole:[Role.USER,Role.ADMIN],
      link:'/record/contactRecord',
      title:'查看紀錄',
    },
    {
      needRole:[Role.NOT_LOGIN,Role.USER],
      link:'/myConsultantList/consultantList',
      title:'我的顧問清單',
    },
    {
      needRole:[Role.USER,Role.ADMIN],
      link:'',
      title:'登出',
    },
    {
      needRole:[Role.NOT_LOGIN,Role.USER],
      link:'/consultantLogin',
      title:'顧問登入',
    },
  ];
  get idToken():string | null{
    return localStorage.getItem('id_token');
  }
  get roleOfState():string | null{
    return localStorage.getItem('roleOfState');
  }
  get loginRole():string{
    return this.roleOfState&&this.idToken ? this.roleOfState : Role.NOT_LOGIN;
  }

  linkTo(routerLink:string):void{
    _.isEqual(routerLink,'') ? this.fakeLogout() :this.$router.push(routerLink);
  }


  // TODO: 僅OTP認證開發前 暫時使用
  fakeLogout():void{
    localStorage.clear();
    this.$router.go(0);
  }
}
export enum Role{
  USER='user',
  ADMIN='admin',
  NOT_LOGIN='',
}
</script>