天下无坑

天下无坑


权限相关

  • 权限判断与拦截 > isAuthPage()定义在js/config/menu-config.js

进入后台时, app-frame.vue通过isAuthPage()判断权限 路由变动时, js/config/router.config.js的路由守卫通过isAuthPage()判断权限拦截路由

  • 菜单的修改与更新
!theme bluegray
authorization.vue -> app_frame.vue: 保存菜单,触发SYS_MENU_REFRESH事件
app_frame.vue -> app_menu.vue: 触发SYS_MENU_UPDATE事件

\src\components\app-frame.vue

methods: {
    initMenu() {
      // 如果使用权限配置,配合后端获取请求的数据
      // R.Account.menus().then(resp => {
      //   if (resp.ok) {
      //     this.menus = getMenus(resp.body);
      //     this.menuSelect();
      //   }
      // });

      //SYS_CONFIG_MENU 存储于浏览器的localStorage
      let menus = Utils.getLocal2Json('SYS_CONFIG_MENU') || fullMenuKeys;
      G.set('SYS_MENUS', menus);
      G.trigger('SYS_MENU_UPDATE');
      if (!isAuthPage(this.$route.name)) {
        this.$router.replace({ name: 'PermissionError' });
      }
    }
  },

\src\components\app-menu.vue

  methods: {
    init() {
      this.menus = getMenus(G.get('SYS_MENUS'));
      this.$nextTick(() => {
        this.menuSelect();
      });
    },
    ...
  },
  mounted() {
    this.init();
    const listener = G.addlistener('SYS_MENU_UPDATE', () => {
      this.init();
    });
    this.$once('hook:beforeDestroy', function () {
      G.removelistener(listener);
    });
  },
  • 权限的路由守卫 \src\js\config\router-config.js
  router.beforeEach((to, from, next) => {
    if (!isFirstRouter && !isAuthPage(to.name)) {
      next({ name: 'PermissionError' });
      return;
    }
    HeyUI.$LoadingBar.start();
    if (to.meta && to.meta.title) {
      document.title = to.meta.title + ' - 管理应用';
    } else {
      document.title = '管理系统';
    }
    isFirstRouter = false;
    next();
  });

页面列表

ITEM_HTML