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>
  import { mapMutations } from 'vuex'
  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(){
      // if(this.$store.state.token){
      //   localStorage.setItem('token', this.$store.state.token);
      // }else{
      //   if(localStorage.getItem("token")){
      //     this.$store.commit('saveToken', localStorage.getItem('token'));
      //   }
      // }
      //
      // if(this.$store.state.user && this.$store.state.user.name){
      //   localStorage.setItem('user', JSON.stringify(this.$store.state.user));
      // }else{
      //   if(localStorage.getItem("user")){
      //     this.$store.commit('saveUser', JSON.parse(localStorage.getItem('user')));
      //     console.log(JSON.parse(localStorage.getItem('user')));
      //   }
      // }
      //
      // this.refresh();
    },

    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.$cookies.removeAll();
        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>