Vue 동적 라우팅의 두 가지 구현 방법은 무엇입니까?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!