Vue 동적 라우팅의 두 가지 구현 방법: 1. 관리자 및 일반 사용자의 권한만 포함하는 간단한 역할 라우팅 설정은 일반적으로 프런트 엔드에서 직접 수행됩니다. 2. OA 시스템 및 여러 역할에 대한 권한 구성과 같은 복잡한 라우팅 권한 설정은 일반적으로 백엔드가 라우팅 목록을 반환해야 하며 프런트엔드 렌더링이 사용됩니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
동적 라우팅은 일반적인 정적 라우팅과 다릅니다. 다양한 "요인"에 따라 사이트 라우팅 목록을 변경할 수 있습니다.
동적 라우팅 설정에는 일반적으로 두 가지 유형이 있습니다.
(1) 단순 역할 라우팅 설정: 예를 들어 관리자와 일반 사용자의 권한만 포함합니다. 일반적으로 간단한 역할 권한 설정은 프런트 엔드에서 직접 수행됩니다
(2), 복잡한 라우팅 권한 설정: OA 시스템, 여러 역할에 대한 권한 구성 등. 일반적으로 라우팅 목록을 반환하려면 백엔드가 필요하며 프런트 엔드 렌더링이 사용됩니다
1. 간단한 역할 라우팅 설정
(1) 프로젝트 라우팅 권한 구성
// router.js import Vue from 'vue' import Router from 'vue-router' import Layout from '@/layout' Vue.use(Router)// 权限路由列表 let asyncRoutes = [ { path: '/permission', component: Layout, redirect: '/permission/page', alwaysShow: true, name: 'Permission', meta: { title: 'Permission', roles: ['admin', 'editor'] // 普通的用户角色 }, children: [ { path: 'page', component: () => import('@/views/permission/page'), name: 'PagePermission', meta: { title: 'Page', roles: ['editor'] // editor角色的用户才能访问该页面 } }, { path: 'role', component: () => import('@/views/permission/role'), name: 'RolePermission', meta: { title: 'Role', roles: ['admin'] // admin角色的用户才能访问该页面 } } ] }, ] // 静态路由 let defaultRouter = [{ path: '/404', name: '404', component: () => import('@/views/404'), meta: { title: '404' } }] let router = new Router({ mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: defaultRouter }) export default router
(2) 새 공개 생성 asyncRouter.js 파일
// asyncRouter.js //判断当前角色是否有访问权限 function hasPermission(roles, route) { if (route.meta && route.meta.roles) { return roles.some(role => route.meta.roles.includes(role)) } else { return true } } // 递归过滤异步路由表,筛选角色权限路由 export function filterAsyncRoutes(routes, roles) { const res = []; routes.forEach(route => { const tmp = { ...route } if (hasPermission(roles, tmp)) { if (tmp.children) { tmp.children = filterAsyncRoutes(tmp.children, roles) } res.push(tmp) } }) return res }
(3) 라우팅 가드 생성: 공용 퍼미션.js 파일 생성 및 라우팅 가드 설정
import router from './router' import store from './store' import NProgress from 'nprogress' // 进度条插件 import 'nprogress/nprogress.css' // 进度条样式 import { getToken } from '@/utils/auth' import { filterAsyncRoutes } from '@/utils/asyncRouter.js' NProgress.configure({ showSpinner: false }) // 进度条配置 const whiteList = ['/login'] router.beforeEach(async (to, from, next) => { // 进度条开始 NProgress.start() // 获取路由 meta 中的title,并设置给页面标题 document.title = to.meta.title // 获取用户登录的token const hasToken = getToken() // 判断当前用户是否登录 if (hasToken) { if (to.path === '/login') { next({ path: '/' }) NProgress.done() } else { // 从store中获取用户角色 const hasRoles = store.getters.roles && store.getters.roles.length > 0 if (hasRoles) { next() } else { try { // 获取用户角色 const roles = await store.state.roles // 通过用户角色,获取到角色路由表 const accessRoutes = filterAsyncRoutes(await store.state.routers,roles) // 动态添加路由到router内 router.addRoutes(accessRoutes) next({ ...to, replace: true }) } catch (error) { // 清除用户登录信息后,回跳到登录页去 next(`/login?redirect=${to.path}`) NProgress.done() } } } } else { // 用户未登录 if (whiteList.indexOf(to.path) !== -1) { // 需要跳转的路由是否是whiteList中的路由,若是,则直接条状 next() } else { // 需要跳转的路由不是whiteList中的路由,直接跳转到登录页 next(`/login?redirect=${to.path}`) // 结束精度条 NProgress.done() } }}) router.afterEach(() => { // 结束精度条 NProgress.done() })
(4) main.js
에 허가.js 파일 도입 (5) 스토어
2. 복잡한 라우팅 권한 설정(백엔드에서 라우팅 데이터를 동적으로 반환)
(1) 프로젝트 라우팅 파일을 구성하지 않거나 일부가 있습니다. 공개 경로, 즉 권한이 없는 경로
import Vue from 'vue' import Router from 'vue-router' import Layout from '@/layout'; Vue.use(Router)// 配置项目中没有涉及权限的公共路由 export const constantRoutes = [ { path: '/login', component: () => import('@/views/login'), hidden: true }, { path: '/404', component: () => import('@/views/404'), hidden: true }, ] const createRouter = () => new Router({ mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }) const router = createRouter() export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher } export default router
(2) 새 공개 asyncRouter.js 파일 만들기
// 引入路由文件这种的公共路由 import { constantRoutes } from '../router';// Layout 组件是项目中的主页面,切换路由时,仅切换Layout中的组件 import Layout from '@/layout'; export function getAsyncRoutes(routes) { const res = [] // 定义路由中需要的自定名 const keys = ['path', 'name', 'children', 'redirect', 'meta', 'hidden'] // 遍历路由数组去重组可用的路由 routes.forEach(item => { const newItem = {}; if (item.component) { // 判断 item.component 是否等于 'Layout',若是则直接替换成引入的 Layout 组件 if (item.component === 'Layout') { newItem.component = Layout } else { // item.component 不等于 'Layout',则说明它是组件路径地址,因此直接替换成路由引入的方法 newItem.component = resolve => require([`@/views/${item.component}`],resolve) // 此处用reqiure比较好,import引入变量会有各种莫名的错误 // newItem.component = (() => import(`@/views/${item.component}`)); } } for (const key in item) { if (keys.includes(key)) { newItem[key] = item[key] } } // 若遍历的当前路由存在子路由,需要对子路由进行递归遍历 if (newItem.children && newItem.children.length) { newItem.children = getAsyncRoutes(item.children) } res.push(newItem) }) // 返回处理好且可用的路由数组 return res }
(3) 라우팅 가드 만들기: 공용 허가.js 파일을 만들고 라우팅 가드 설정
// 进度条引入设置如上面第一种描述一样 import router from './router' import store from './store' import NProgress from 'nprogress' // progress bar import 'nprogress/nprogress.css' // progress bar style import { getToken } from '@/utils/auth' // get token from cookie import { getAsyncRoutes } from '@/utils/asyncRouter' const whiteList = ['/login']; router.beforeEach( async (to, from, next) => { NProgress.start() document.title = to.meta.title; // 获取用户token,用来判断当前用户是否登录 const hasToken = getToken() if (hasToken) { if (to.path === '/login') { next({ path: '/' }) NProgress.done() } else { //异步获取store中的路由 let route = await store.state.addRoutes; const hasRouters = route && route.length>0; //判断store中是否有路由,若有,进行下一步 if ( hasRouters ) { next() } else { //store中没有路由,则需要获取获取异步路由,并进行格式化处理 try { const accessRoutes = getAsyncRoutes(await store.state.addRoutes ); // 动态添加格式化过的路由 router.addRoutes(accessRoutes); next({ ...to, replace: true }) } catch (error) { // Message.error('出错了') next(`/login?redirect=${to.path}`) NProgress.done() } } } } else { if (whiteList.indexOf(to.path) !== -1) { next() } else { next(`/login?redirect=${to.path}`) NProgress.done() } }})router.afterEach(() => { NProgress.done() })
(4) Permission.js 파일을 main.js에 도입합니다
(5) 로그인 시 스토어에 라우팅 정보를 저장합니다
// 登录接口调用后,调用路由接口,后端返回相应用户的路由res.router,我们需要存储到store中,方便其他地方拿取 this.$store.dispatch("addRoutes", res.router);
이때 동적 루트 전체를 사용할 수 있으나 페이지 점프와 루트 가드는 처리가 비동기적이며 동적 경로가 추가된 후 페이지가 빈 페이지로 리디렉션됩니다. 이는 경로가 next()를 실행할 때 아직 존재하지 않기 때문입니다. window.location.reload()를 통해 경로를 새로 고칠 수 있습니다
백엔드에서 반환되는 경로 형식:
routerList = [ { "path": "/other", "component": "Layout", "redirect": "noRedirect", "name": "otherPage", "meta": { "title": "测试", }, "children": [ { "path": "a", "component": "file/a", "name": "a", "meta": { "title": "a页面", "noCache": "true" } }, { "path": "b", "component": "file/b", "name": "b", "meta": { "title": "b页面", "noCache": "true" } }, ] } ]
참고: Vue는 단일 페이지 애플리케이션이므로 페이지를 새로 고치면 데이터의 일부가 손실됩니다. 따라서 라우팅이 손실되지 않도록 데이터를 저장소에 로컬로 저장해야 합니다.
【관련 추천: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발】
위 내용은 Vue 동적 라우팅의 두 가지 구현 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!