新版本下的旧 URL “拦截门” - 如何优雅地拒绝访问

最新推荐文章于 2025-06-05 18:55:34 发布

道一云黑板报

最新推荐文章于 2025-06-05 18:55:34 发布

阅读量361

点赞数 3

文章标签： URL 路由拦截路由管理策略低代码智能路由器

本文链接：https://blog.youkuaiyun.com/Daoyiyun/article/details/144818258

版权

序言

系统大版本升级后，我们公司的低代码产品在功能和界面上进行了较大的改进，因此存在新版本和旧版本的切换使用，并且前端代码中旧版本路由和新版本是耦合在一起的。为了让用户逐渐适应新版本，我们需要同时维护两个版本。对于新用户，他们可以直接使用新版本体验产品。而对于旧用户，我们默认将其引导至旧版本，同时提供了体验新版本的选项。然而，在这个过渡期中，我们面临着两个问题：

在新版本下，如何处理用户访问旧版本url的交互体验问题？
在旧版本下，如何处理用户访问新版本url的交互体验问题？

下面，我们将分别探讨这两个在前端技术下如何设计 & 实现

需求

1.在新版本下，用户访问旧版本url，出现以下引导页面。让用户自由选择去哪个版本

2.在旧版本下，用户访问新版本url，出现以下引导页面。让用户自由选择去哪个版本

方案

1.如何区分新旧路由？

两个版本路由耦合在一起？那该如何区分？

设计路由版本标识：在路由元信息meta中添加参数version，类型为数组，指明路由适用的版本。

version: ['v2', 'v3'] -> 代表该路由在v2、v3个版本内都适用
version: ['v2'] -> 代表该路由只能在v2版本内适用
version: ['v3'] -> 代表该路由只能在v3版本内适用

2.路由拦截

路由版本标识有了，那就来整个路由过滤公共方法：将非当前版本的路由组件重定向到对应的引导页面组件：@/views/error/versionChange

/**
 * 过滤路由配置，将不符合当前版本的路由的component引入@/views/error/versionChange
 *
 * @param {Array} routes 路由配置数组
 * @returns {Array} 符合版本要求的路由配置数组
 */
export function filterRoutes(routes) {
  // 获取当前系统版本
  const loginStatus = localStorage.getItem(_isConsoleLogin) || sessionStorage.getItem('is_console_login')
  if (loginStatus) {
    const version = getConsoleVersion()
    if (!version) {
      // 没有缓存时，要初始化设置版本
      authUtils._redirectDefaultCallback({ isJump: false })
    }
    const isV2Url = window.location.href.indexOf('micro') < 0
    /**
   * 辅助函数：递归过滤路由配置树中的每个节点
   *
   * @param {Object} route 当前处理的路由对象
   * @param {Object} parent 父路由对象（可选）
   * @returns {Object|undefined} 处理后的路由对象，或 undefined（如果该路由不符合版本要求）
   */
    const filterRoute = function(route) {
      if (route.meta && route.meta.version && version && !route.meta.version.includes(version)) {
      // 将不符合当前版本的路由的component引入@/views/error/versionChange
        route.component = () => import('@/views/error/versionChange')
      } else if (version === 'v3' && isV2Url && !route?.meta?.version && !route?.redirect) {
      // 3.0版本下原则上不允许访问不带micro的链接, 想要允许访问, 需要根据情况补充meta.version, meta.version不能为空
        route.component = () => import('@/views/error/versionChange')
      }
      if (route && route.children) {
      //  使用 map() 方法遍历当前路由对象的子路由，
      //  并递归调用 filterRoute() 函数来处理每个子路由
        route.children = route.children.map(child => filterRoute(child))
      }
      return route
    }
    // 使用 map() 方法遍历原始路由配置数组，并递归地过滤每个路由对象
    return routes.map(route => filterRoute(route))
  } else {
    return routes
  }
}

3.路由模块中按需引入公共方法

const adminComponent = () => import('@/views/index/index')

Vue.use(Router)

// 定义子路由模块集合
const filterRouteList = filterRoutes([...index])

const childrenRouter = [
  {
    path: '/',
    name: 'index',
    component: adminComponent,
    children: filterRouteList
  }
]

export default childrenRouter