前端 + 接口请求实现 vue 动态路由

news2024/11/25 20:33:27

前端 + 接口请求实现 vue 动态路由

在 Vue 应用中，通过前端结合后端接口请求来实现动态路由是一种常见且有效的权限控制方案。这种方法允许前端根据用户的角色和权限，动态生成和加载路由，而不是在应用启动时就固定所有的路由配置。

实现原理

  1. 定义静态路由配置：

    • 在项目的初始阶段，定义一套完整的路由配置，这些配置包含了所有可能的路由路径和相关的权限信息。

  2. 用户登录与鉴权：

    • 用户登录时，前端向后端发送请求验证用户的身份。
    • 服务器验证成功后，返回一个包含用户信息和权限的数据对象。

  3. 获取用户权限信息：

    • 前端根据登录时获得的令牌（如 JWT），再次向后端请求获取当前用户的权限信息。
    • 权限信息可能包括用户的角色、能够访问的资源等。

  4. 动态生成路由：

    • 前端根据从后端获取的权限信息，动态生成符合用户权限的路由表。
    • 这个过程可以通过递归算法处理路由配置树，根据用户的权限过滤掉无权访问的路由。

  5. 动态添加路由：

    • 使用 Vue Router 的 router.addRoutes(routes) 方法将生成的路由动态添加到路由实例中。
    • 这样只有经过权限验证的路由才会被添加，从而实现了权限控制。

  6. 动态渲染菜单：

    • 左侧菜单通常是基于生成的路由表来渲染的，因此只有用户有权访问的路由才会在菜单中显示。

优点

  1. 安全性：

    • 只有经过验证的用户才能访问其权限范围内的页面。
    • 减少了由于硬编码路由导致的安全漏洞。

  2. 灵活性：

    • 可以根据用户的权限动态调整应用的结构，无需重新部署整个应用即可调整路由。
    • 支持按需加载（懒加载），提高应用性能。

  3. 用户体验：

    • 只展示用户可以访问的菜单项，避免显示无用链接，提高用户体验。
    • 用户界面更加简洁，只显示与其角色相关的功能。

  4. 可维护性：

    • 简化了路由配置，因为不需要为每个角色单独编写路由配置，而是集中管理权限。
    • 更容易扩展和修改权限配置，只需更新后端的权限数据即可。

  5. 开发效率：

    • 开发者只需要关注业务逻辑，而不需要关心每个角色的具体路由配置。
    • 减少了重复工作，提高了开发效率。

示例

在前导航路由钩子 beforeEach 函数里发送接口请求获取路由信息

permission.js

// permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getStore } from '@/utils/store';

const whiteList = ['/login', '/404', '/401'];

router.beforeEach((to, from, next) => {
  let token = getStore('token');

  if (token) {
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' });
    } else {
      if (store.getters.roles.length === 0) {
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(() => {
          // 获取路由信息
          store.dispatch('GenerateRoutes').then((res) => {
            console.log('--------------', res);
            // 根据roles权限生成可访问的路由表
            router.addRoutes(res) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
          store.dispatch('LogOut').then(() => {
            Message.error(err)
            next(`/`)
          })
        })
      } else {
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login`) // 否则全部重定向到登录页
    }
  }
})

permission.js 文件需引入到 main.js 里

如果项目 vue-router 版本超过 3.3.0, 需要遍历路由数组再使用 router.addRoute() 方法逐个添加路由

res.forEach( route => {
	router.addRoute(route);
})

假设后端接口返回的路由权限如下

[
  {
    path: '/admin',
    meta: {
      title: "系统管理",
    },
    component: 'Layout',
    children: [
      {
        path: 'user',
        name: 'userIndex',
        meta: {
          title: "用户管理",
        },
        component: '/admin/user/index.vue'
      },
      {
        path: 'role',
        name: 'roleIndex',
        meta: {
          title: "角色管理",
        },
        component: '/admin/role/index.vue',
        children: [
          {
            path: 'add',
            name: 'addRole',
            meta: {
              title: "添加角色",
            },
            component: '/admin/user/index.vue'
          },
          {
            path: 'update',
            name: 'updateRole',
            meta: {
              title: "编辑角色",
            },
            component: '/admin/role/index.vue'
          }
        ]
      }
    ]
  },
  {
    path: '/tableEcho',
    meta: {
      title: "表格管理",
    },
    component: 'Layout',
    children: [
      {
        path: 'test',
        name: 'tableEchoIndex',
        meta: {
          title: "表格测试",
        },
        component: '/tableEcho/index.vue',
        children: [
          {
            path: 'add',
            name: 'addTable',
            hidden: true,
            meta: {
              title: "新增测试",
            },
            component: '/tableEcho/add.vue'
          }
        ]
      },
    ],
  },
]

vuex 处理数据

store/index.vue

// store/index.vue
import Vue from 'vue'
import Vuex from 'vuex'
import { routes, dynamicRoutes } from "@/router";
import { login, getInfo, logout, getRouters } from "@/api/user";
import { setStore, clearStore } from '@/utils/store';
import Layout from '@/Layout/index.vue'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    routes,
    token: "",
    roleType: "",
    roles: [],
    permissions: [],
    sidebarRouters: [],

  },
  getters: {
    token: state => state.token,
    roles: state => state.roles,
    permissions: state => state.permissions,
    sidebarRouters: state => state.sidebarRouters,
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token;
    },
    SET_USERINFO: (state, user) => {
      state.userInfo = user;
    },
    SET_ROLETYPE: (state, roleType) => {
      state.roleType = roleType;
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles;
    },
    SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions;
    },
    SET_ROUTE: (state, sidebarRouters) => {
      state.sidebarRouters = sidebarRouters;
    },
  },
  actions: {
    Login({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(res => {
          setToken(res.data.token);
          setStore('token', res.data.token);
          commit('SET_TOKEN', res.data.token);
          resolve();
        }).catch(error => {
          reject(error);
        })
      })
    },
    // 获取用户信息
    GetInfo({ commit }) {
      return new Promise((resolve, reject) => {
        getInfo().then(res => {
          console.log('res::: ', res);
          if (res.data.code === 0 || 200) {
            const user = res.data.sysUser;
            const roleType = res.data.roleType;
            commit('SET_USERINFO', user);

            // roleType 用户所用的权限级别 1 普通用户  2 项目经理  3 部门管理员  4 综合部管理员  5  部门领导  -1 项目运维管理员
            setStore('ROLE_TYPE', roleType);
            if (res.data.roles) { // 验证返回的roles是否为真
              commit('SET_ROLES', res.data.roles);
              commit('SET_PERMISSIONS', res.data.permissions);
            } else {
              commit('SET_ROLES', ['ROLE_DEFAULT']);
            }
            resolve();
          } else {
            reject(error);
          }
        }).catch(error => {
          reject(error);
        })
      })
    },
    GenerateRoutes({ commit }) {
      return new Promise((resolve, reject) => {
        // 向后端请求路由数据
        getRouters().then(res => {
          if (res.data.code === 0 || 200) {
            const sdata = JSON.parse(JSON.stringify(res.data.routes));
            console.log('sdata::: ', sdata);

            let newRouters = filterAsyncRouter(sdata);

            // 连接公共路由
            const sidebarRoutes = routes.concat([...newRouters]);
            commit('SET_ROUTE', sidebarRoutes);
            resolve(sidebarRoutes);
          } else {
            reject(error);
          }
        }).catch(error => {
          reject(error);
        })
      })
    },
    // 退出系统
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          commit('SET_PERMISSIONS', [])
          clearStore('token');
          clearStore('userInfo')
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
  },
  modules: {
  }
})

const loadView = (view) => {
  // 路由懒加载
  return () => import(`@/views${view}`);
};

function filterAsyncRouter(routes) {
  return routes.filter((route) => {
    if (Array.isArray(route.children) && route.children.length > 0) {
      // 如果该路由含有子路由时,递归调用该函数
      route.children = filterAsyncRouter(route.children);
    }

    if (route.component) {
      // Layout ParentView 组件特殊处理
      if (route.component === "Layout") {
        route.component = Layout;
      } else {
        // 路由组件懒加载
        route.component = loadView(route.component);
      }
    }

    return true;
  })
}

由于接口返回的 component 是字符串, 需手动封装函数转换成组件

公共路由如下

router/index.js

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/Layout/index.vue'

Vue.use(VueRouter)

// 公共路由
export const routes = [
  {
    path: '/',
    name: 'redirect',
    component: Layout,
    hidden: true, // 隐藏菜单
    redirect: "/homePage", // 用户在地址栏输入 '/' 时会自动重定向到 /homePage 页面
  },
  {
    path: '/homePage',
    component: Layout,
    redirect: "/homePage/index",
    meta: {
      title: "首页",
    },
    children: [
      {
        path: 'index',
        name: 'homePageIndex',
        meta: {
          title: "首页",
        },
        component: () => import('@/views/homePage/index.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login.vue'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error/404.vue'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error/401.vue'),
    hidden: true
  },
]

const router = new VueRouter({
  base: process.env.BASE_URL,
  routes
})

export default router

文件结构如下
在这里插入图片描述
页面菜单渲染

在这里插入图片描述

左侧菜单实现参考链接: Elemnt-UI + 递归组件实现后台管理系统左侧菜单

前端单独实现动态路由参考连接: 前端单独实现 vue 动态路由

总结

通过以上步骤，你可以实现一个完整的动态路由权限管理系统：

  • 后端接口返回路由配置：获取用户的权限信息及路由信息。
  • 动态加载组件：使用异步组件方式加载指定路径的组件。
  • 动态添加路由：根据权限信息动态添加路由。
  • 路由守卫：使用 router.addRoutes() 或 router.addRoute() 添加路由。

这样可以确保应用根据用户的权限动态加载相应的路由，增强安全性与灵活性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2128991.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C语言-综合案例：通讯录

C语言-综合案例：通讯录

传送门：C语言-第九章-加餐：文件位置指示器与二进制读写 目录 第一节：思路整理 第二节：代码编写 2-1.通讯录初始化 2-2.功能选择 2-3.增加 和 扩容 2-4.查看 2-5.查找 2-6.删除 2-7.修改 2-8.退出 第三节：测试 下期…
阅读更多...
基于SpringBoot+Vue的超市外卖管理系统

基于SpringBoot+Vue的超市外卖管理系统

作者：计算机学姐 开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。 专栏推荐：前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…
阅读更多...
OceanBase 企业版OMS 4.2.3的使用

OceanBase 企业版OMS 4.2.3的使用

OceanBase 企业版OMS 4.2.3的使用 一、界面说明 1.1 概览 1.2 数据迁移 1.3 数据同步 1.4 数据源管理 1.5 运维监控 1.6 系统管理 二、功能说明 注意： 在数据迁移与数据同步的功能中，如果涉及到增量操作： 1.需要使用sys租户的用…
阅读更多...
828华为云征文 | 华为云Flexusx与Docker技术融合，打造个性化WizNote服务

828华为云征文 | 华为云Flexusx与Docker技术融合，打造个性化WizNote服务

前言 华为云Flexusx携手Docker技术，创新融合打造高效个性化WizNote服务。Flexusx的柔性算力与Docker的容器化优势相结合，实现资源灵活配置与性能优化，助力企业轻松构建稳定、高效的云端笔记平台。828华为云企业上云节特惠来袭，Fle…
阅读更多...
【无标题】Efinity 0基础进行流水灯项目撰写（FPGA）

【无标题】Efinity 0基础进行流水灯项目撰写（FPGA）

文章目录 前言一、定义概念 缩写1. 二、性质1.2. 三、使用步骤编译常见错误1. 没加分号2. end 写多了 编译成功的标志总结参考文献 前言 数电课设 使用 FPGAIDE 使用 Efinity 一、定义概念 缩写 1. 二、性质 1. 2. 三、使用步骤 python代码块matlab代码块c代码块编译…
阅读更多...
你真的了解Canvas吗--解密二【ZRender篇】

你真的了解Canvas吗--解密二【ZRender篇】

书接上文你真的了解Canvas吗--解密一【ZRender篇】 目录 入口 挖掘 继承 _init step-1：取所有key值 ​​​​​​​ step-2：定义构造函数BezierCurveShape …
阅读更多...
PMP--一模--解题--1-10

PMP--一模--解题--1-10

文章目录 14.敏捷--方法--替代敏捷方法--看板1、 [单选] 根据项目的特点，项目经理建议选择一种敏捷方法，该方法限制团队成员在任何给定时间执行的任务数。此方法还允许团队提高工作过程中问题和瓶颈的可见性。项目经理建议采用以下哪种方法？ …
阅读更多...
金属铬厂商分析：前十强厂商占有大约64.0%的市场份额

金属铬厂商分析：前十强厂商占有大约64.0%的市场份额

金属铬是一种灰色、有光泽、硬而脆的过渡金属。铬是不锈钢的主要添加剂，可增加耐腐蚀性。 据QYResearch调研团队最新报告“全球金属铬市场报告2024-2030”显示，预计2030年全球金属铬市场规模将达到11.8亿美元，未来几年年复合增长率CAGR为6.5%…
阅读更多...
【数据结构与算法】受限线性表 --- 栈

【数据结构与算法】受限线性表 --- 栈

【数据结构与算法】受限线性表 — 栈 文章目录 【数据结构与算法】受限线性表 --- 栈前言一、栈的基本概念二、栈的顺序存储三、栈的分文件编写四、栈的链式存储五、栈的应用案例-就近分配六、 中缀表达式转后缀表达式以及基于后缀表达式运算总结 前言 本篇文章就栈的基本概念…
阅读更多...
医院HISPACS存储备份 要求全周期保存

医院HISPACS存储备份 要求全周期保存

内蒙古赤峰医院 HIS PACS数据备份 ，质量好可以满足15-30年存储的空间需求，用着放心
阅读更多...
NIDS——suricata（三）

NIDS——suricata（三）

一、监控ICMP流量 1、ICMP流量特征 四大特征分别为：消息类型（Type）、代码（Code）、校验和（Checksum）、数据字段（Data Field）。这里我们使用 type消息类型。 ICMP 消息的类…
阅读更多...
Cookie、Web Storage介绍

Cookie、Web Storage介绍

概述 Cookie、LocalStorage、SessionStorage、IndexDB这些作为浏览器的存储入口，也是经典的八股文了，本文再次冷饭热吃来介绍这些API，主要是因为在其他文章中看到了一些个人感觉有用的小知识点，所以在这记录一下，以便…
阅读更多...
招加盟商视频怎么拍效果好？

招加盟商视频怎么拍效果好？

一定没有人比我更适合分享这篇文章了，我自己曾经就是做宣传片的，而且还有一家酸奶品牌做全国招商。 我来分享下加盟招商视频怎么拍效果好？ 一、定脚步 说个题外话，以前我做传媒公司的时候，很多客户找我做宣传片&…
阅读更多...
Ubuntu系统Docker部署数据库管理工具DbGate并实现远程查询数据

Ubuntu系统Docker部署数据库管理工具DbGate并实现远程查询数据

文章目录 前言1. 安装Docker2. 使用Docker拉取DbGate镜像3. 创建并启动DbGate容器4. 本地连接测试5. 公网远程访问本地DbGate容器5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 前言 本文主要介绍如何在Linux Ubuntu系统中使用Docker部署DbGate数…
阅读更多...
Windows安装字体的几种方式

Windows安装字体的几种方式

1.选中你要安装的字体，然后右键，点击“为所有用户安装”，这样字体就会安装在C:\Windows\Fonts；如果你点了“安装”，那么就会安装在C:\Users\你电脑用户的名字\AppData\Local\Microsoft\Windows\Fonts。 像电脑自带的字…
阅读更多...
strncmp函数的使用

strncmp函数的使用

目录 1.头文件 2.strncmp函数的使用 小心&#xff01;VS2022不可直接接触&#xff0c;否则&#xff01;没这个必要&#xff0c;方源面色淡然一把抓住&#xff01;顷刻炼化&#xff01; 1.头文件 strncmp函数的使用需要头文件 #include<string.h> 2.strncmp函数的使用 …
阅读更多...
第一篇：教你轻松部署本地大模型（Ollama）

第一篇：教你轻松部署本地大模型（Ollama）

一、前言 搞研发的&#xff0c;想学习大模型的&#xff0c;很多都想本地部署一波&#xff0c;体验一下&#xff0c;部署是学习的第一步&#xff0c;我们不仅仅是要理论的巨人&#xff0c;还要成为实战的专家。不要恐惧&#xff0c;不要恐惧&#xff0c;不要恐惧&#xff0c;重…
阅读更多...
【数学建模】典型相关分析

【数学建模】典型相关分析

典型相关分析&#xff08;Canonical Correlation Analysis, CCA&#xff09;是一种统计方法&#xff0c;用于寻找两个多变量数据集之间的线性关系。这种分析方法可以用来衡量两个数据集之间的相关性&#xff0c;并找出能够最好地解释这种相关性的变量组合。 典型相关分析的基本…
阅读更多...
Android系列基础知识总结

Android系列基础知识总结

四大组件 Activity Activity生命周期 不同场景下Activity生命周期的变化过程 启动Activity&#xff1a; onCreate()—>onStart()—>onResume()&#xff0c;Activity进入运行状态。Activity退居后台&#xff1a; 当前Activity转到新的Activity界面或按Home键回到主屏&a…
阅读更多...
WebGL系列教程二（环境搭建及着色器初始化）

WebGL系列教程二（环境搭建及着色器初始化）

目录 1 前言2 新建html页面3 着色器介绍3.1 顶点着色器、片元着色器与光栅化的概念3.2 声明顶点着色器3.3 声明片元着色器 4 坐标系(右手系)介绍5 着色器初始化5.1 给一个画布canvas5.2 获取WebGL对象5.3 创建着色器对象5.4 获取着色器对象的源5.5 绑定着色器的源5.6 编译着色器…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023