이 글에서는 주로 vue-router 권한 제어의 샘플 코드를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
회사의 백엔드 관리 시스템이 최근 구축되었으며 시스템이 상대적으로 큽니다. 다음 사항을 충족해야 합니다.
메뉴 권한, 권한에 따라 다른 메뉴 표시
작업 권한 등. , 일부 계정에는 신규 증가 권한이 없고 일부 계정에는 수정 또는 삭제 권한이 없습니다
통계 개요 등 데이터 권한, 일반 관리자는 회사의 사업 개요를 볼 수 없지만 자신의 지역에 대한 개요는 볼 수 있습니다
목록, 작업 등 표시 권한 해당 열에서 계약 금액을 볼 수 있지만, 시장에서는 아직까지 공사 중이며 메뉴 권한 및 작업 권한이 해결되었습니다.
처음에는 위에 제공된 방법도 따랐습니다. 먼저 로컬에서 경로 세트를 구성한 다음 로그인에 성공하면 서버에서 메뉴 목록이 반환되고 반환된 메뉴가 표시됩니다. 로컬로 구성된 경로를 나열하고 비교하고, 존재하는 경우 해당 경로에 액세스할 수 있는 권한이 있습니다. 며칠 동안 작업한 후에는 사용하기 어렵다는 것을 알았습니다. 로컬에서 전체 경로 세트를 구성해야 했고, 권한을 할당하기 위해 이러한 라우팅 정보를 서버에 기록하기 위해 여러 페이지도 만들어야 했습니다. 우리처럼 권한 메뉴가 많은 경우 이 백엔드에는 회사 내부 권한은 물론 에이전트, 판매자 권한 등 여러 세트가 있습니다. 이러한 구성은 너무 피곤하고 수백 개가 넘을 수 있습니다. 오류가 발생하기 쉽습니다.
// 实例化Login类并初始化 new Login(function (err, data) { if (err) { // 登录出错 } else { // 登录成功 init(data); } }).init(); const init = function (data) { // 先配置路由信息 // componentConfigs 是本地的组件配置 let routers = assignRouter(data.menus, componentConfigs); // 实例化路由 router = new Router({routes: routers}); // 再实例化vue new Vue({ el: '#app', store, router, nprogress, ...App }); };
export default { Common: { Admin: require('../../vue/pages/common/Admin'), Index: require('../../vue/pages/common/Index'), UpdatePassword: r => require.ensure([], () => r(require('../../vue/pages/users/UpdatePassword')), 'users') } }
서버 반환 메뉴 JSON:
그중 META 필드에 현재 경로의 작업 권한이
[{ "path": "\/admin\/index", "name": "\u9996\u9875", "component": "Common.Index", "display": true, "icon": "icon-home" }, { "path": "\/admin\/updatePassword", "name": "\u4fee\u6539\u5bc6\u7801", "component": "Common.UpdatePassword", "display": false }, { "path": "\/admin\/commodity", "name": "\u5546\u54c1\u7ba1\u7406", "component": "Content", "display": true, "icon": "icon-class", "children": [{ "path": "\/admin\/commodity\/publicWarehouse", "name": "\u516c\u5171\u5e93\u7ba1\u7406", "component": "Commodity.PublicWarehouse", "display": true, "meta": {"handleAuth": {"add": true, "edit": false, "del": true}} }, { "path": "\/admin\/commodity\/businessesWarehouse", "name": "\u5546\u5bb6\u5e93\u7ba1\u7406", "component": "Commodity.BusinessesWarehouse", "display": true, "meta": {"handleAuth": {"add": true, "edit": false, "del": true}} }] }]
관련 권장 사항:
실용적인 PHP 회원 권한 제어 구현 원리 분석_PHP 튜토리얼
위 내용은 vue-router의 권한 제어 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!