exhibition_service_admin/src/App.vue

<template>
  <div id="app" class="custom-theme">
    <router-view
      :is-animation="isAnimation"
      :menu-router="menuRouter"
      :menu-active="menuActive"
      :breadcrumb="breadcrumb"
      :is-collapse="isCollapse"
      @changeCollapse="isCollapse = !isCollapse"
    />
  </div>
</template>

<script>
import router from '@/router'
import { canIShow } from '@/permission'
import hugerte from 'hugerte'
export default {
  name: 'App',
  data() {
    return {
      roles: [],
      isAnimation: false,
      menuRouter: [],
      menuActive: 0,
      breadcrumb: [],
      isCollapse: false,
    }
  },
  created() {
    this.initGuards()
  },
  mounted() {
    this.initStore()
  },
  methods: {
    initStore() {
      window.addEventListener('beforeunload', () => {
        localStorage.setItem('store', JSON.stringify(this.$store.state))
      })
      try {
        localStorage.getItem('store') && this.$store.replaceState(JSON.parse(localStorage.getItem('store')))
      } catch (e) {
        localStorage.removeItem('store')
      }
    },
    initGuards() {
      this.$router.afterEach((to, from, next) => {
        this.refreshRoute()
      })
      this.$router.beforeEach((to, from, next) => {
        console.log(to)
        if (router.app.$store.getters.token) {
          if (router.app.$store.getters.user.isAdmin) {
            canIShow(to.meta.roles).then(res => {
              this.isAnimation = true
              hugerte.remove('#editor-creat')
              hugerte.remove('#editor')
              setTimeout(() => {
                this.isAnimation = false
                if (res) {
                  next()
                } else {
                  next({
                    name: '401'
                  })
                }
              }, 400)
            })
          } else {
            next({
              name: 'login'
            })
          }
        } else {
          if (to.name === 'login' || to.name === 'userRegister' || to.name === 'userForm' || to.name === 'thirdLogin') {
            next()
          } else {
            next({
              name: 'userRegister'
            })
          }
        }
      })
    },
    refreshRoute() {
      this.menuRouter = this.$router.options.routes[0].children
      this.breadcrumb = this.$route.matched
      this.menuRouter.forEach((item, index) => {
        if (item.name === this.$route.name) {
          this.menuActive = index
          if (item.meta.collapse !== undefined) {
            this.isCollapse = !!item.meta.collapse
          }
        }
        if (item.children) {
          item.children.forEach((child, subIndex) => {
            if (child.name === this.$route.name) {
              this.menuActive = index + '-' + subIndex
              if (child.meta.collapse !== undefined) {
                this.isCollapse = !!child.meta.collapse
              }
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
 body,html,#app{
   margin: 0;
   height: 100%;
   width: 100%;
   overflow: hidden;
 }
 textarea{
   font-family: inherit;
 }
 .loading{
   animation: loading 800ms infinite alternate;
 }
 @keyframes loading {
   from{
     background: #e1e1e1;
   }
   to{
     background: #f1f1f1;
   }
 }
*{
  box-sizing: border-box;
}
 input[aria-hidden="true"]{
   display: none !important;
 }
</style>