vue iview 동적 라우팅 및 권한 확인 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

이번에는 vue iview 동적 라우팅 및 권한 확인 단계에 대해 자세히 설명하겠습니다. vue iview 동적 라우팅 및 권한 확인 사용 시 주의사항은 무엇인가요?

github에는 Vue에 동적 경로 추가에 대한 많은 예가 있습니다. 일부 프로젝트를 참조한 후 이 프로젝트는 iview 프레임워크를 기반으로 동적 경로 추가 및 메뉴 새로 고침을 완료했습니다. 도움이 필요한 다른 친구들을 돕기 위해 이제 구현 논리를 공유하고 함께 소통하고 배울 수 있습니다.

Github 주소

iview-dynamicRouter

목표 달성

클라이언트는 서버로부터 라우팅 및 권한 데이터를 받은 후 프로젝트의 라우팅 및 메뉴 목록을 새로 고치고 권한 제어를 수행합니다.

프로젝트 기반

기본 프레임워크: iview 컴포넌트 라이브러리 공식 템플릿 프로젝트 iview-admin의 템플릿 브랜치 프로젝트, 이 프로젝트는 iview-admin의 기본 프레임워크 코드입니다. 프로젝트 주소: iview-admin

구현 로직

동적 라우팅 제어 로딩

일반적으로 동적 라우팅 제어는 두 가지 유형으로 나누어집니다. 하나는 모든 라우팅 데이터를 로컬 파일에 저장하고, 그 다음 획득하는 것입니다. 서버에서 사용자의 권한 정보를 가져오고, 경로 점프 시 권한 판단 후크를 추가합니다. 사용자가 이동하는 페이지가 권한 목록에 없으면 점프가 금지됩니다. 다른 하나는 오류 처리 페이지, 권한 없음 제어 페이지 등 기본 경로만 로컬에 저장하고 서버는 사용자 권한에 따라 해당 라우팅 데이터를 발급하고 클라이언트는 허용 경로를 가져오는 것입니다. 이러한 데이터를 사용하여 작업을 수행합니다. 동적 생성 및 경로 추가를 위해 이 문서에서는 두 번째 방법을 채택합니다.

iview-admin 프로젝트는 경로를 세 가지 유형으로 나눕니다.

로그인, 404, 403 및 기타 오류 페이지 경로와 같은 기본 구성 요소의 하위 페이지로 표시되지 않는 페이지 경로
하위로; - 홈 페이지 라우팅
과 같이 표시되지만 왼쪽 메뉴에 표시되지 않는 기본 구성 요소 Router otherRouter의 페이지는 기본 구성 요소의 하위 페이지로 표시되며 왼쪽 메뉴 appRouter에 표시됩니다.

라우팅 데이터를 얻은 후 우리는 주로 두 가지 작업을 수행합니다. 작업의 일부인 첫 번째 부분은 데이터를 탐색하고 구성 요소 비동기 로딩 방법을 사용하여 각 라우팅 노드에 해당하는 구성 요소를 로드한 다음 페이지 태그를 사용하는 것입니다.

프레임워크 및 router.addRoutes(routes) 完成路由列表的动态添加；第二部分是因为 iview-admin breadcrumb 탐색에서 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;
}

로그인 후 복사

마지막으로 main.js에서 호출

//main.js
 mounted () {
 // 调用方法，动态生成路由
 util.initRouter(this);
 }

로그인 후 복사

권한 제어

동적 라우팅 구현과 유사 조작 권한 제어는 일반적으로 두 가지 유형으로 나누어집니다. 첫 번째는 페이지가 표시될 때 권한이 제어되지 않는 것입니다. 그런 다음 조작이 시작되면 권한 판단이 수행됩니다. 사용자에게 작업에 대한 권한이 있으면 통과합니다. 그렇지 않으면 사용자에게 권한이 없다는 알림이 표시됩니다. 두 번째 방법은 페이지가 로드될 때 권한을 판단하는 것이며, 권한 없는 작업은 표시되지 않습니다. 나는 개인적으로 사용자가 보는 것이 작동 가능해야 한다고 생각하는 두 번째 방법을 선호합니다. 그렇지 않으면 버튼을 클릭한 다음 권한이 없다는 메시지가 표시되는 것이 매우 불편할 것입니다.

이 프로젝트의 아이디어 소스는 참조 블로그 게시물을 참조하세요. 원래 블로거의 구체적인 아이디어는 라우팅 구조의 메타 필드에

사용자 작업 권한 목록을 추가한 다음 전역 명령을 등록하는 것입니다. 노드가 처음으로 렌더링되면 페이지 권한이 존재하는지 확인하고 전달된 매개변수가 권한 목록에 없으면 노드가 직접 삭제됩니다.

주요 코드 구현은 다음과 같습니다.

라우팅 데이터에 권한 필드를 추가하여 권한 목록을 저장합니다

//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;

로그인 후 복사

权限组件使用示例：

<template>
 <p>
  <h1>page1</h1>
  <Button v-hasPermission="&#39;add&#39;">添加</Button>
  <Button v-hasPermission="&#39;edit&#39;">修改</Button>
  <Button v-hasPermission="&#39;del&#39;">删除</Button>
 </p>
</template>

로그인 후 복사

全局注册组件

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

로그인 후 복사

这种权限控制方法的优点就是，不管是管理配置还是页面处理逻辑都相对简单，没有很多重复的代码判断和节点处理，在参考对比了网上几种实现方式后，个人比较推荐这一种方法。

页面标签和面包屑导航

在我看来，页面标签和面包屑都属于系统中锦上添花的页面相关控件，提高页面管理的便捷性，在iview官方admin项目中已经实现了这两个组件。所以这个项目中，只是将其进行移植，实现了组件功能，没有深入了解，感兴趣的可以仔细研究。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！