菜单控制

登录后获取到菜单数据，保存到vuex中，刷新之后就没有了，所以在保存到vuex中的时候也保存到storage中，退出的时候清空vuex的数据也清空storage中的数据，通过刷新一下页面就清空，window.location.reload()

界面控制

路由导航守卫

router.beforeEach((to, from, next) => {
    if(to.path === '/login') {
        next()
    } else {
        const token = sessionStorage.getItem('token')
        token ? next() : next('/login')
    }
})

router.addRoutes(数组)、router.addRoute(单个对象)

在app.vue里引入动态添加路由的方法，不然刷新页面找不到

按钮控制

v-permission 指令
import Vue from 'vue'
import router from '@/router'

/**
 * 例如：v-permission="{action: 'add', effect: 'disabled'}"
 * mate: ['add', 'view', 'edit', 'delete']
 **/

Vue.directive('permission', {
    inserted(el, binding) {
        const { action, effect } = binding.value
        const { currentRoute: { meta } } = router // 获取当前路由
        if(meta?.indexOf(action) === -1) {
            if(effect === 'disabled') {
                el.disabled = true // 按钮的禁用
                el.classList.add('is-disabled') // elementUI按钮的禁用
            } else {
                el.parentNode.removeChild(el) // 移除节点
            }
        }
    }
})

请求控制

在axios里的请求拦截里做控制，比如post方式是add，put=>edit等

响应控制

token失效，跳转到登录页，在响应拦截里status为401的时候，token失效

谢谢