Vue + iView 동적 라우팅 및 권한 검증 구현

7139 단어 authadmin-templateiview
github에서 vue 동적 추가 루트에 대한 예가 매우 많습니다. 본 프로젝트는 일부 프로젝트를 참고한 후 iview 프레임워크를 바탕으로 동적 루트의 동적 추가와 메뉴 리셋을 완성했습니다.다른 필요한 친구들을 돕기 위해 논리를 실현하는 것을 공유하고 함께 교류하고 공부하는 것을 환영합니다.
iview-dynamicRouter
vue+iview 구성 요소 라이브러리의 동적 루트와 권한 검증 실현
Github 주소
iview-dynamicRouter
목표를 달성하다
클라이언트가 서버에서 루트와 권한 데이터를 받은 후 프로젝트의 루트와 메뉴 목록을 갱신하고 권한 제어를 합니다.
프로젝트 기초
  • 기본 프레임워크: iview 구성 요소 라이브러리 공식 템플릿 프로젝트iview-admin의template 지점 프로젝트, 이 프로젝트는 iview-admin의 기본 프레임워크 코드입니다.프로젝트 주소: iview-admin
  • 권한 검증: 권한 검증은 Vue + ElementUI 데몬 관리 웹 사이트 기본 프레임워크 (2) 권한 제어에서 실현된 사고방식과 일부 코드를 참고했다.

    • 논리를 실현하다
    동적 라우팅 제어 로드
    일반적으로 동적 루트 제어는 두 가지로 나뉜다. 하나는 모든 루트 데이터를 로컬 파일에 저장한 다음에 서버에서 사용자의 권한 정보를 얻는 것이다. 루트가 이동할 때 권한 판단 갈고리를 추가하고 사용자가 가는 페이지가 권한 목록에 없으면 이동을 금지한다.다른 하나는 로컬에서 기본 루트만 저장하는 것이다. 예를 들어 오류 처리 페이지, 무권한 제어 페이지 등이다. 반면에 권한 루트는 서버에서 얻고 서버는 사용자의 권한에 따라 해당하는 루트 데이터를 보내고 클라이언트는 이런 데이터를 이용하여 루트의 동적 생성과 추가를 한다. 본고는 두 번째 방법을 사용한다.
    iview-admin 프로젝트는 경로를 세 가지로 나눈다.
  • Main 구성 요소의 하위 페이지로 전시되지 않는 페이지 루트, 예를 들어login, 404, 403 등 잘못된 페이지 루트;
  • Main 구성 요소의 하위 페이지로 보이지만 왼쪽 메뉴에 나타나지 않는 루트otherRouter, 예를 들어 첫 번째 페이지 루트;
  • Main 구성 요소의 하위 페이지로 전시되고 왼쪽 메뉴에 표시되는 루트appRouter.

    • 루트 데이터를 받은 후에 우리는 주로 두 부분의 조작을 한다. 첫 번째 부분은 데이터를 훑어보고 구성 요소를 비동기적으로 불러오는 방법을 이용하여 각 루트 노드에 대응하는 구성 요소를 불러오고 router.addRoutes(routes)를 이용하여 루트 목록의 동적 추가를 완성한다.두 번째 부분은 iview-admin 프레임 아래의 페이지 라벨과 빵 부스러기 내비게이션으로 appRouter를 옮겨다니며 루트 정보를 얻어야 하기 때문에 우리도 루트 데이터를 vuex에 저장하여 전역적으로 접근할 수 있도록 해야 한다.
    특히 404 페이지가 정적 경로라면 처음 페이지에 들어갈 때 동적 경로가 불러오지 않고 경로 주소를 찾지 못하면 기본적으로 404 오류 페이지로 넘어가 체험이 좋지 않기 때문에 404 경로는 경로 규칙에 쓰지 않고 동적 경로와 함께 불러옵니다.
    주요 코드는 다음과 같습니다.
    데이터 요청 및 루트 노드 생성
    //util.js

//    
util.initRouter = function (vm) {
    const constRoutes = [];
    const otherRoutes = [];

    // 404             
    const otherRouter = [{
        path: '/*',
        name: 'error-404',
        meta: {
            title: '404-     '
        },
        component: 'error-page/404'
    }];
    //       
    util.ajax('menu.json').then(res => {
        var menuData = res.data;
        util.initRouterNode(constRoutes, menuData);
        util.initRouterNode(otherRoutes, otherRouter);
        //        
        vm.$store.commit('updateAppRouter', constRoutes.filter(item => item.children.length > 0));
        //       
        vm.$store.commit('updateDefaultRouter', otherRoutes);
        //       
        vm.$store.commit('updateMenulist', constRoutes.filter(item => item.children.length > 0));
    });
};

//      
util.initRouterNode = function (routers, data) {
    for (var item of data) {
        let menu = Object.assign({}, item);
        menu.component = lazyLoading(menu.component);

        if (item.children && item.children.length > 0) {
            menu.children = [];
            util.initRouterNode(menu.children, item.children);
        }
        //      
        meta.permission = menu.permission ? menu.permission : null;
        //    
        meta.title = menu.title ? menu.title : null;
        menu.meta = meta;
    }
};

    동적 로드 구성 요소
    //lazyLoading.js

export default (url) =>()=>import(`@/views/${url}.vue`)

    Store 캐시 구현
    //app.js

 //          ，    
updateAppRouter (state, routes) {
    state.routers.push(...routes);
    router.addRoutes(routes);
},

//         ，     
updateDefaultRouter (state, routes) {
    router.addRoutes(routes);
},
//       ，    
updateMenulist (state, routes) {
    state.menuList = routes;
}

    마지막으로js에서 호출
    //main.js
 mounted () {
    //     ，      
    util.initRouter(this);
  }

    권한 제어
    동적 루트 실현 방법과 유사하고 조작 권한 제어도 일반적으로 두 가지로 나뉜다. 첫 번째는 페이지가 나타날 때 권한을 제어하지 않고 모든 조작, 예를 들어 단추가 모두 나타난다. 그리고 조작이 시작될 때 권한 판단을 한다. 만약에 사용자가 이 조작의 권한을 가지고 있다면 통과한다. 그렇지 않으면 사용자에게 권한이 없다는 것을 알리고 두 번째는 페이지가 불러올 때이다.권한 판단에 대해 권한이 없는 조작은 표시되지 않습니다.본인은 두 번째 방법을 더 좋아합니다. 이렇게 하면 사용자를 오도하지 않습니다. 개인적으로 사용자가 본 것은 반드시 조작할 수 있어야 한다고 생각합니다. 그렇지 않으면 버튼을 누르고 권한이 없다는 것을 알려주면 기분이 언을 것입니다.
    본 프로젝트의 사고방식은 참고 블로그를 보십시오. 원래 블로그의 구체적인 사고방식은 루트 구조의 메타 필드에 사용자 조작 권한 목록을 추가한 다음에 전역 명령을 등록하고 노드가 처음 렌더링될 때 이 페이지에 권한이 있는지 판단하고 존재하는 파라미터가 권한 목록에 없으면 이 노드를 삭제합니다.
    주요 코드는 다음과 같습니다.
    라우팅 데이터에 필드permission 추가, 사용 권한 목록 저장
    //menu.json，        
[
  {
    "path": "/groupOne",
    "icon": "ios-folder",
    "name": "system_index",
    "title": "groupOne",
    "component": "Main",
    "children": [
      {
        "path": "pageOne",
        "icon": "ios-paper-outline",
        "name": "pageOne",
        "title": "pageOne",
        "component": "group/page1/page1",
        "permission":["del"]
      },
     ...
    ]
  }
]

    루트 노드를 반복적으로 생성할 때 permission 필드 데이터를 루트 노드meta 속성에 저장합니다
    //util.js

//      
util.initRouterNode = function (routers, data) {
    for (var item of data) {
        ....
        //      
        meta.permission = menu.permission ? menu.permission : null;
        ...
    }
};

    전역 명령 구성 요소를 정의하고 루트permission 속성 값을 읽고 권한 목록을 얻습니다. 권한 목록에 권한이 없으면 노드를 삭제합니다.
    //hasPermission.js 

const hasPermission = {
    install (Vue, options) {
        Vue.directive('hasPermission', {
            bind (el, binding, vnode) {
                let permissionList = vnode.context.$route.meta.permission;
                if (permissionList && permissionList.length && !permissionList.includes(binding.value)) {
                    el.parentNode.removeChild(el);
                }
            }
        });
    }
};

export default hasPermission;

    사용 권한 구성 요소 사용 예:

    글로벌 등록 구성 요소
    // main.js

import hasPermission from '@/libs/hasPermission.js';
Vue.use(hasPermission);

    이런 권한 제어 방법의 장점은 관리 설정이든 페이지 처리 논리든 모두 상대적으로 간단하고 중복된 코드 판단과 노드 처리가 많지 않다는 것이다. 인터넷에서 몇 가지 실현 방식을 비교한 후에 개인이 이 방법을 비교적 추천한다.
    페이지 레이블 및 빵 부스러기 탐색
    내가 보기에 페이지 라벨과 빵 부스러기는 모두 시스템에서 금상첨화의 페이지 관련 컨트롤러에 속하고 페이지 관리의 편리성을 높인다. iview 공식admin 프로젝트에서 이 두 가지 구성 요소를 실현했다.그래서 이 프로젝트에서 이를 이식하여 구성 요소의 기능을 실현했을 뿐 깊이 이해하지 못했고 관심 있는 것은 자세하게 연구할 수 있다.
    나에게 연락하다
    Email:[email protected]
    Linux 설치 설정 Maven 3.5.0
    Vue 사용자 정의 구성 요소 (간단한 사용자 정의 구성 요소)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage