집 > 기사 > 웹 프론트엔드 > vue-router는 권한 제어 방법을 구현합니다.

vue-router는 권한 제어 방법을 구현합니다.

小云云원래의: 2018-02-03 14:48:222260검색

이 글에서는 주로 vue-router 권한 제어의 샘플 코드를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

회사의 백엔드 관리 시스템이 최근 구축되었으며 시스템이 상대적으로 큽니다. 다음 사항을 충족해야 합니다.

메뉴 권한, 권한에 따라 다른 메뉴 표시
작업 권한 등. , 일부 계정에는 신규 증가 권한이 없고 일부 계정에는 수정 또는 삭제 권한이 없습니다
통계 개요 등 데이터 권한, 일반 관리자는 회사의 사업 개요를 볼 수 없지만 자신의 지역에 대한 개요는 볼 수 있습니다
목록, 작업 등 표시 권한 해당 열에서 계약 금액을 볼 수 있지만, 시장에서는 아직까지 공사 중이며 메뉴 권한 및 작업 권한이 해결되었습니다.

메뉴 권한:

처음에는 위에 제공된 방법도 따랐습니다. 먼저 로컬에서 경로 세트를 구성한 다음 로그인에 성공하면 서버에서 메뉴 목록이 반환되고 반환된 메뉴가 표시됩니다. 로컬로 구성된 경로를 나열하고 비교하고, 존재하는 경우 해당 경로에 액세스할 수 있는 권한이 있습니다. 며칠 동안 작업한 후에는 사용하기 어렵다는 것을 알았습니다. 로컬에서 전체 경로 세트를 구성해야 했고, 권한을 할당하기 위해 이러한 라우팅 정보를 서버에 기록하기 위해 여러 페이지도 만들어야 했습니다. 우리처럼 권한 메뉴가 많은 경우 이 백엔드에는 회사 내부 권한은 물론 에이전트, 판매자 권한 등 여러 세트가 있습니다. 이러한 구성은 너무 피곤하고 수백 개가 넘을 수 있습니다. 오류가 발생하기 쉽습니다.

최종 해결 방법은 로그인 페이지를 별도로 만들고 vue 구성 요소에 배치하지 않는 것입니다. 로그인이 성공하면 메뉴 목록이 백그라운드에서 캡처됩니다. 이제 성공했으므로 캡처는 완전히 새로운 메뉴를 갖는 것뿐입니다. 성공적으로 가져온 후 이를 경로에 구성한 다음 vue를 인스턴스화합니다. 이렇게 하면 경로 집합을 로컬로 구성할 필요가 없고 서버에서 경로가 완전히 구성됩니다.

이 방법으로 해결되는 문제는 단 하나입니다. 즉, 라우팅에는 해당 구성 요소가 필요하므로 모든 구성 요소를 개체에 저장합니다. 서버에서 반환된 메뉴 목록에는 구성 요소 이름을 구성하는 필드가 있습니다. 가져오기가 성공한 후 라우팅 구성을 생성할 때 router[menuName]을 사용하여 이 구성 요소에 직접 로드하면 매우 편리합니다.代Main.js 코드 조각:

// 实例化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: &#39;#app&#39;,
  store,
  router,
  nprogress,
  ...App
 });
};

ComponentConfigs.js 코드 조각:

export default {
 Common: {
  Admin: require(&#39;../../vue/pages/common/Admin&#39;),
  Index: require(&#39;../../vue/pages/common/Index&#39;),
  UpdatePassword: r => require.ensure([], () => r(require(&#39;../../vue/pages/users/UpdatePassword&#39;)), &#39;users&#39;)
 }
}

서버 반환 메뉴 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}}
      }]
    }]

메뉴의 권한은 대략 다음과 같습니다. 작업 권한에 대한 아이디어는 다음과 같습니다. 인증 vue 플러그인을 작성한 다음 모든 작업을 독립적으로 메서드에 넣은 다음 인증 기능을 모두 호출합니다. 작업 @click, $ auth('add', arg1, arg2, ...argN); $auth는 this.$route.meta에 이 작업을 수행할 권한이 있는지 확인합니다. 그렇다면 this[authName].apply(null)을 호출하세요. , arg);

vue-router는 권한 제어 방법을 구현합니다.

관련 기사