frontend/src/App.vue

<template>
  <div>
    <router-view/>
    <global-message></global-message>
  </div>
</template>

<script>
import GlobalMessage from '@/components/GlobalMessage'

export default {
  components: { GlobalMessage },
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    // 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }

    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })

    // getUserInfo().then(res => {
    //   this.userInfo = res
    //   this.$router.beforeEach((to, from, next) => {
    //     if (to.meta.roles && to.meta.roles.includes(this.userInfo.type.toLowerCase())) {
    //       next()
    //     } else {
    //       next({ path: '/login' })
    //     }
    //   })
    // })
  }
}
</script>

<style lang="scss">
@import "~@/style/reset.scss";
@import "~@/style/theme.scss";

@font-face {
  font-family: 'iconfont';  /* project id 1598214 */
  src: url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.eot');
  src: url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.woff') format('woff'),
  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.svg#iconfont') format('svg');
}

body {
  color: #3a4a5a;
}

* {
  -webkit-tap-highlight-color: transparent;
}

.title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 24px;
}

.sub-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}

.no-content-warning {
  color: #aabaca;
  font-size: 20px;
  font-weight: bold;
  padding: 12px 0;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.8;

  .no-content-warning-tip {
    padding: 24px 0;
  }
}

.tag {
  display: inline-block;
  position: relative;
  background-color: lighten($theme-blue, 30);
  color: $theme-blue;
  font-size: 12px;
  padding: 4px 12px;
  margin-left: 4px;
  border-radius: 8px;
  vertical-align: middle;
  bottom: 2px;
}

.full-width {
  width: 100%;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mt-16 {
  margin-top: 16px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-32 {
  margin-bottom: 32px;
}
</style>