SEEC-Portal-Front/components/Navi.vue

<template>
  <nav class="nav">
    <div class="nav__body">
      <router-link to="/"><img src="/image/seec-logo--full.png" class="nav__logo" /></router-link>
      <ul class="nav__list nav__list-left">
        <li class="nav__item nav__item-left"><a href="http://helper.seecoder.cn" target="_self">HELPER</a></li>
        <li class="nav__item nav__item-left"><a href="http://coder.seecoder.cn" target="_self">CODER</a></li>
        <li class="nav__item nav__item-left"><a href="http://developer.seecoder.cn" target="_self">DEVELOPER</a></li>
      </ul>
      <el-input placeholder="搜索课程" class="nav__search" disabled>
        <el-button slot="append" icon="el-icon-search" disabled></el-button>
      </el-input>
      <ul class="nav__list nav__list-right" v-if="isLogin">
        <li class="nav__item">
          <router-link to="/person/info" v-if="!isAdmin">个人中心</router-link>
          <router-link to="/admin/checkApplications" v-else>平台管理</router-link>
        </li>
        <li class="nav__item">
          <el-popover
            placement="bottom-start"
            width="120"
            trigger="hover"
            popper-class="drop-container">
            <div class="drop-info">
              <div class="drop-info__item drop-info__name">{{userName}}</div>
              <div class="drop-info__item">({{userPhone}})</div>
            </div>
            <el-menu
              class="el-menu-vertical-demo drop-list">
              <el-menu-item index="2" v-if="isTeacher">
                教师界面
              </el-menu-item>
              <el-menu-item index="3" @click="logout">
                退出登录
              </el-menu-item>
            </el-menu>
            <img slot="reference" class="nav__photo" src="/image/default-photo.jpg"/>
          </el-popover>
        </li>
      </ul>
      <ul class="nav__list nav__list-right" v-else>
        <li class="nav__item"><router-link to="/login">登录</router-link></li>
        <li class="nav__item"><router-link to="/register">注册</router-link></li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Navi',
  data () {
    return {
      isLogin: !!this.$store.state.token,
      isTeacher: this.$store.state.user.role === 'TEACHER',
      isAdmin: this.$store.state.user.role === 'ADMIN',
      userName: this.$store.state.user.name,
      userPhone: this.$store.state.user.phone
    }
  },
  mounted () {
  },

  methods: {
    logout () {
      this.$store.commit('saveToken', null)
      this.$store.commit('saveUser', {})
      this.$cookies.remove('token', { maxAge: 24 * 60 * 60 })
      this.$cookies.remove('user', { maxAge: 24 * 60 * 60 })
      this.refresh()
      this.$router.push('/')
    },
    refresh () {
      this.isLogin = !!this.$store.state.token
      this.isTeacher = this.$store.state.user.role === 'TEACHER'
      this.isAdmin = this.$store.state.user.role === 'ADMIN'
      this.userName = this.$store.state.user.name
      this.userPhone = this.$store.state.user.phone
    }
  }
}
</script>

<style scoped>

</style>