Apakah dua kaedah pelaksanaan penghalaan dinamik vue?

Dua kaedah pelaksanaan penghalaan dinamik vue: 1. Tetapan penghalaan peranan yang mudah, seperti hanya melibatkan kebenaran pentadbir dan pengguna biasa biasanya tetapan kebenaran peranan yang mudah dilakukan secara langsung pada bahagian hadapan. 2. Tetapan kebenaran penghalaan yang kompleks, seperti sistem OA dan konfigurasi kebenaran untuk berbilang peranan biasanya bahagian belakang perlu mengembalikan senarai penghalaan dan pemaparan bahagian hadapan digunakan.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Penghalaan dinamik adalah berbeza daripada penghalaan statik biasa Ia boleh menukar senarai penghalaan tapak mengikut "faktor" yang berbeza.

Secara amnya terdapat dua jenis tetapan penghalaan dinamik:

(1) Tetapan penghalaan peranan mudah: Contohnya, ia hanya melibatkan kebenaran pentadbir dan pengguna biasa. Biasanya tetapan kebenaran peranan yang mudah

(2) dan tetapan kebenaran penghalaan yang kompleks dilakukan secara langsung pada bahagian hadapan: seperti sistem OA dan konfigurasi kebenaran untuk berbilang peranan. Biasanya bahagian belakang diperlukan untuk mengembalikan senarai penghalaan, dan pemaparan bahagian hadapan menggunakan

Tetapan penghalaan peranan mudah

(1. ) Konfigurasikan kebenaran penghalaan projek

// 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) Cipta fail asyncRouter.js awam baharu

// 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) Cipta pengawal penghalaan: Cipta fail permission.js awam dan sediakan pengawal penghalaan

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) Perkenalkan fail permission.js ke dalam main.js

(5) Simpan peranan dalam stor semasa log masuk

2. Tetapan kebenaran penghalaan yang kompleks (bahagian belakang mengembalikan data penghalaan secara dinamik)

(1) Konfigurasikan fail penghalaan projek Tiada laluan dalam fail, atau terdapat beberapa laluan awam, iaitu tiada kebenaran Laluan

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) Buat fail asyncRouter.js awam

// 引入路由文件这种的公共路由
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) Buat pengawal penghalaan. : Cipta fail permission.js awam dan sediakan pengawal penghalaan

//  进度条引入设置如上面第一种描述一样
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) Perkenalkan fail permission.js dalam main.js

(5) Simpan maklumat penghalaan dalam kedai semasa log masuk

//  登录接口调用后，调用路由接口，后端返回相应用户的路由res.router，我们需要存储到store中，方便其他地方拿取
this.$store.dispatch("addRoutes", res.router);

Pada ketika ini, keseluruhan laluan dinamik boleh digunakan, tetapi lompat halaman dan pemprosesan pengawal laluan tidak segerak Akan ada halaman kosong yang melompat selepas laluan dinamik ditambahkan. Ini kerana apabila laluan dijalankan seterusnya(), penghala Data di dalam belum wujud Pada masa ini, anda boleh memuat semula laluan melalui window.location.reload()
Format laluan yang dikembalikan oleh bahagian belakang. :

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" }
            },
        ]
    }
]

Nota: vue ialah aplikasi satu halaman , jadi sebahagian daripada data akan hilang sebaik sahaja halaman dimuat semula, jadi kami perlu menyimpan data dalam stor secara setempat untuk memastikan bahawa laluan tidak hilang.

[Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah dua kaedah pelaksanaan penghalaan dinamik vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!