이번에는 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 경로가 먼저 라우팅 규칙에 기록되지 않고 동적 라우팅과 함께 로드됩니다.
메인 코드는 다음과 같이 구현됩니다. 데이터 요청 및 라우팅 노드 생성
//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
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="'add'">添加</Button> <Button v-hasPermission="'edit'">修改</Button> <Button v-hasPermission="'del'">删除</Button> </p> </template>
全局注册组件
// main.js import hasPermission from '@/libs/hasPermission.js'; Vue.use(hasPermission);
这种权限控制方法的优点就是，不管是管理配置还是页面处理逻辑都相对简单，没有很多重复的代码判断和节点处理，在参考对比了网上几种实现方式后，个人比较推荐这一种方法。
页面标签和面包屑导航
在我看来，页面标签和面包屑都属于系统中锦上添花的页面相关控件，提高页面管理的便捷性，在iview官方admin项目中已经实现了这两个组件。所以这个项目中，只是将其进行移植，实现了组件功能，没有深入了解，感兴趣的可以仔细研究。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 vue iview 동적 라우팅 및 권한 확인 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
