client-base-v5/src/client/top-nav-user-info.vue

<template>
  <ul class="nav navbar-nav navbar-right">
    <li>
      <img :src="userImageSrc" class="user-profile-img" />
    </li>
    <li class="dropdown">
      <a
        href="#"
        class="dropdown-toggle"
        data-toggle="dropdown"
        role="button"
        aria-haspopup="true"
        aria-expanded="false"
      >

        {{ loginInfo != undefined ? loginInfo.userName : "" }}
        <span class="caret" />
      </a>
      <ul class="dropdown-menu">
        <li>
          <a @click="setUserParameters">{{ $t("lang.top-nav-user-info.personalSettings") }}</a>
        </li>
        <li>
          <a @click="logout"><i class="fa fa-sign-out pull-right" />{{ $t("lang.top-nav-user-info.cancellation") }}</a>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
import Common from '../common/Common.js';
import AuthSettingResource from '../api/commom/AuthSettingResource.js';

export default {
  props: {
    loginInfo: {
      type: Object,
      default: function(){
        return null;
      },
    },
  },

  data: function () {
    this.Common = Common;
    return {
    };
  },

  computed: {
    userImageSrc: function () {
      if (this.loginInfo == null || this.loginInfo.imageName == null) {
        return null;
      }
      return Common.getThumbnailImageSrc('com.leanwo.prodog.base.model.User', this.loginInfo.imageName);
    },
  },

  mounted: function () {
    var _self = this;
  },

  methods: {
    
    setUserParameters: function () {
      this.$router.push('/desktop/userParameters');
    },


    logout: function () {
      Common.clearLocalStorage();

      //path为指定路径，直接删除该路径下的cookie
      $.removeCookie('#accountId', { path: '/' });
      $.removeCookie('token', { path: '/' });

      // bug fixed by jack
      // 清除掉/pcapp路径的cookie
      $.removeCookie('#accountId', { path: '/pcapp' });
      $.removeCookie('token', { path: '/pcapp' });

      this.$router.push('/login');
      // 这边存在问题，模块化以后，需要修复
      // AuthSettingResource.getAuthSettingDto().then(
      //   successData => {
      //     if (successData != null) {
      //       var url =
      //                       'http://jaccount.sjtu.edu.cn/oauth2/logout?client_id=' +
      //                       successData.jaccountClientId +
      //                       '&post_logout_redirect_uri=' +
      //                       Common.getRedirectUrl('#/login');
      //       window.location.href = url;
      //     } else {
      //       this.$router.push('/login');
      //     }
      //   },
      //   errorData => {
      //     Common.processException(errorData);
      //   },
      // );
    },
  },
};
</script>

<style scoped>
.user-profile-img {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    margin-top: 10px;
}
</style>