权限相关
<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 -> app_frame.vue: 保存菜单,触发SYS_MENU_REFRESH事件
app_frame.vue -> 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 => {
// 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(() => {
this.menuSelect();
});
},
...
},
mounted() {
this.init();
const listener = G.addlistener('SYS_MENU_UPDATE', () => {
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) => {
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();
});</code></pre>