如何设计前端菜单按钮权限拦截的实现策略与思路？

本文共计1143个文字，预计阅读时间需要5分钟。

此方案基于Vue框架实现，依赖Vue项目相关的库，如router和store等。前端需与后端协同，通常后端返回一个树形结构的菜单数据，前端根据这些数据渲染页面，并为每个页面设置相应的权限控制路径。

此实现方案基于vue框架，并需要依赖vue项目相关的库，router、store等等；前端同学要与后端同学协商，常规是让后端返回一个树结构的菜单数据，并且将所有的涉及权限控制的页面path给到后端，如果是按钮，需要把所有的按钮 code 码统一下，这是前期工作，很重要。

首先，main.js 引入相关文件

import Vue from 'vue'; import App from './App.vue'; import router from '@/router'; import store from '@/store'; import '@/plugins/permission'; import '@/plugins/directives'; import '@/plugins/auth'; Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App) }).$mount('#app');

在main.js同目录创建plugins 文件，作为公共文件，在plugins 里创建 permission.js。