天下无坑

天下无坑


权限相关

<ul> <li><strong>权限判断与拦截</strong> <blockquote> <p>isAuthPage()定义在js/config/menu-config.js</p> </blockquote></li> </ul> <p><strong>进入后台时</strong>, app-frame.vue通过<code>isAuthPage()</code>判断权限 <strong>路由变动时</strong>, js/config/router.config.js的路由守卫通过<code>isAuthPage()</code>判断权限拦截路由</p> <ul> <li><strong>菜单的修改与更新</strong></li> </ul> <pre><code class="language-plantuml">!theme bluegray authorization.vue -&gt; app_frame.vue: 保存菜单,触发SYS_MENU_REFRESH事件 app_frame.vue -&gt; app_menu.vue: 触发SYS_MENU_UPDATE事件</code></pre> <hr /> <p><code>\src\components\app-frame.vue</code></p> <pre><code class="language-javascript">methods: { initMenu() { // 如果使用权限配置,配合后端获取请求的数据 // R.Account.menus().then(resp =&gt; { // 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' }); } } },</code></pre> <p><code>\src\components\app-menu.vue</code></p> <pre><code class="language-javascript"> methods: { init() { this.menus = getMenus(G.get('SYS_MENUS')); this.$nextTick(() =&gt; { this.menuSelect(); }); }, ... }, mounted() { this.init(); const listener = G.addlistener('SYS_MENU_UPDATE', () =&gt; { this.init(); }); this.$once('hook:beforeDestroy', function () { G.removelistener(listener); }); },</code></pre> <ul> <li><strong>权限的路由守卫</strong> <code>\src\js\config\router-config.js</code></li> </ul> <pre><code class="language-Javascript"> router.beforeEach((to, from, next) =&gt; { if (!isFirstRouter &amp;&amp; !isAuthPage(to.name)) { next({ name: 'PermissionError' }); return; } HeyUI.$LoadingBar.start(); if (to.meta &amp;&amp; to.meta.title) { document.title = to.meta.title + ' - 管理应用'; } else { document.title = '管理系统'; } isFirstRouter = false; next(); });</code></pre>

页面列表

ITEM_HTML