vue-element-plus-admin整合后端实战——实现系统登录、缓存用户数据、实现动态路由

目标

整合vue-element-plus-admin前端框架，作为开发平台的前端。

准备工作

前端选用vue-element-plus-admin，地址 https://gitee.com/kailong110120130/vue-element-plus-admin。
首先clone项目，然后整合到开发平台中去。这是一个独立的前端的项目，而我将其放到后端项目根目录下，即建一个huayuan-web的目录，将vue-element-plus-admin目录下的内容放进去，相当于将前端项目视为整个工程项目的一个模块。
为什么要这么做呢？原因也简单，从架构上而言，前后端是分离的，不过当前这个平台前后端都是我在做，因此开发模式并不是前后端分别开发，通过mock数据和联调再整合到一块去，而是对于一个功能，例如组织机构管理，往往是后端和前端是一块做的。这样从开发上，从Git单次提交上，都是对于一个功能的完整处理。

既然是将前端项目视为整个工程的一个模块，是一个git仓库统一管理，那么前端项目下就不应该还存在.git目录了。如果直接删除，运行pnpm install会报错，原因是使用了husky，而husky是依赖git 才能安装。
经过几次尝试，做了以下处理。先clone，然后执行pnpm install，确保前端项目能运转起来。然后执行 pnpm unistall husky，既卸载掉husky，然后再删除掉前端项目根目录下的.git目录，这样既保证了前端项目能正常运转，又将其纳入了整个工程。

调用后端服务

完成了基本的源码下载和整合到项目工程，接下来考虑的就是怎么实现前端调用后端服务。
前端使用默认的localhost:4000,后端服务的地址是localhost:8080，首先解决前后端联通性问题。
首先调整的是vite.config.ts中的server节点下的proxy设置，具体如下：

server: {
      port: 4000,
      proxy: {
        //  系统管理模块
        '/system': {
          target: env.VITE_BASE_URL,
          changeOrigin: true         
        }        
      }
}

即把路径以/system起始的请求转发到后端，其中env.VITE_BASE_URL是在local.env中定义：

# 环境
NODE_ENV=development

# 请求路径
VITE_BASE_URL='http://localhost:8080'

# 接口前缀
VITE_API_BASEPATH=/my-api

# 打包路径
VITE_BASE_PATH=/

# 标题
VITE_APP_TITLE=ElementAdmin

系统登录

前后端联通后，首先实现的功能，肯定是登录。
结果看了下官方文档，只有安装、目录结构和功能组件的大概介绍，并没有如何跟后端整合的介绍。百度搜了下，结果都是基vue-element-admin的，也就是vue2.0+Element UI 的框架。看来新技术与框架只能自己来开荒了，通过源码阅读与摸索来实现。
前端框架能独立运行，输入账号密码后完成登录，进入系统首页，实际上使用的是mock数据，登录方法位于mock/user/index.ts中。

import { config } from '@/config/axios/config'
import { MockMethod } from 'vite-plugin-mock'

const { result_code } = config

const timeout = 1000

const List: {
  username: string
  password: string
  role: string
  roleId: string
  permissions: string | string[]
}[] = [
    {
      username: 'admin',
      password: 'admin',
      role: 'admin',
      roleId: '1',
      permissions: ['*.*.*']
    },
    {
      username: 'test',
      password: 'test',
      role: 'test',
      roleId: '2',
      permissions: ['example:dialog:create', 'example:dialog:delete']
    }
  ]

export default [
  // 列表接口
  {
    url: '/user/list',
    method: 'get',
    response: ({ query }) => {
      const { username, pageIndex, pageSize } = query

      const mockList = List.filter((item) => {
        if (username && item.username.indexOf(username) < 0) return false
        return true
      })
      const pageList = mockList.filter(
        (_, index) => index < pageSize * pageIndex && index >= pageSize * (pageIndex - 1)
      )

      return {
        code: result_code,
        data: {
          total: mockList.length,
          list: pageList
        }
      }
    }
  },
  // 登录接口
  {
    url: '/user/login',
    method: 'post',
    timeout,
    response: ({ body }) => {
      const data = body
      let hasUser = false
      for (const user of List) {
        if (user.username === data.username && user.password === data.password) {
          hasUser = true
          return {
            code: result_code,
            data: user
          }
        }
      }
      if (!hasUser) {
        return {
          code: '500',
          message: '账号或密码错误'
        }
      }
    }
  },
  // 退出接口
  {
    url: '/user/loginOut',
    method: 'get',
    timeout,
    response: () => {
      return {
        code: result_code,
        data: null
      }
    }
  }
] as MockMethod[]

可以看到，逻辑比较简单，无非是比对下预先设置的账号密码，如一致则直接构造一个admin用户返回。

接下来，我来改造下，直接调用后端服务。
系统后端使用SpringSecurity框架，配置的登录路径是/system/user/login。
修改api/login/index.ts中的loginApi即可

export const loginApi = (data: UserType) => {
  return request.post({
    url: '/system/user/login?username=' + data.username + '&password=' + data.password,
    data
  })
}

上面把账号密码通过url参数的方式传入后端，实际是SpringSecurity的限制。SpringSecurity内置的过滤器，不从post请求的body里取数据，所以这地方做了点小处理。
完成上述调整后，使用浏览器调试功能，可以看到真正向后端发起请求了，并且后端返回了登录成功后的数据。

缓存用户数据

vue-element-plus-admin框架对用户信息做了定义，与我的设计差异较大，这地方也做了比较大的改造。
用户信息如下：

import { store } from '../index'
import { defineStore } from 'pinia'
import { useCache } from '@/hooks/web/useCache'
import { USER_KEY } from '@/constant/common'
const { wsCache } = useCache()

interface UserState {
  account: string
  name: string
  forceChangePassword: string
  id: string
  token: string
  buttonPermission: string[]
  menuPermission: string[]
}

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    account: '',
    name: '',
    forceChangePassword: '',
    id: '',
    token: '',
    buttonPermission: [],
    menuPermission: []
  }),
  getters: {
    getAccount(): string {
      return this.account
    }
  },
  actions: {
    async setUserAction(user) {
      this.account = user.account
      this.name = user.name
      this.forceChangePassword = user.forceChangePassword
      this.id = user.id
      this.token = user.token
      this.buttonPermission = user.buttonPermission
      this.menuPermission = user.menuPermission
      wsCache.set(USER_KEY, user)
    },
    async clear() {
      wsCache.clear()
      this.resetState()
    },
    resetState() {
      this.account = ''
      this.name = ''
      this.forceChangePassword = ''
      this.id = ''
      this.token = ''
      this.buttonPermission = []
      this.menuPermission = []
    }
  }
})

export const useUserStoreWithOut = () => {
  return useUserStore(store)
}

包括标识、账号、姓名、是否强制修改密码、令牌、菜单权限数组和按钮权限数组这几个关键字段。
在用户登录成功后，将后端返回的用户信息缓存到浏览器SessionStorage中。

// 登录
const signIn = async () => {
  const formRef = unref(elFormRef)
  await formRef?.validate(async (isValid) => {
    if (isValid) {
      loading.value = true
      const { getFormData } = methods
      const formData = await getFormData<UserType>()

      try {
        const res = await loginApi(formData)

        if (res) {
          // 保存用户信息
          userStore.setUserAction(res.data)

          // 是否使用动态路由
          略
        }
      } finally {
        loading.value = false
      }
    }
  })

实现动态路由

接下来就是最复杂的一块功能改造了，即实现动态路由，根据后端返回的菜单权限，动态构造出前端路由来。
在vue-elment-ui框架里，这块功能实际是没有的，当初我自己费了不少劲最终实现了。
在vue-element-plus-admin框架中里，这块功能有了支持，预留了三种模式：
1.静态路由：也就是默认的前端独立运行模式看到的效果，所有菜单固化，预先配置好。
2.前端控制：只初始化通用的路由至路由表中。对于动态路由，在前端固定写死对应的角色。用户登录后，通过角色去遍历动态路由表，获取该角色可以访问的路由表，生成动态路由表，再通过 router.addRoutes 添加到路由实例。
3.后端控制：通过接口动态生成路由表，且遵循一定的数据结构返回。前端根据需要处理该数据为可识别的结构，再通过 router.addRoutes 添加到路由实例。
上面三种模式，第一种明显不可用，第二种勉强可用，但缺点也很明显，灵活性不够，如果服务端改动角色，前端也需要跟着改动，并且排序什么的都需要前端控制。第三种才是我们真正想要的，后端调整权限，前端无需修改，自动动态获取，处理后形成系统菜单。

虽然前端框架预留了口子，但是调整起来仍然比较复杂，下面具体说说。
首先得改一个全局变量，将store/modules/app.ts 中的dynamicRouter 设置为 true，即启用动态路由，框架在多处会首先判断该配置的取值，进行不同的处理。
其次，是修改store/modules/permission.ts 中的generateRoutes方法。

generateRoutes(
      type: 'admin' | 'test' | 'none',
      routers?: AppCustomRouteRecordRaw[] | string[]
    ): Promise<unknown> {
      return new Promise<void>((resolve) => {
        // TODO:前后端动态路由临时添加固定路由，待去除
        let routerMap: AppRouteRecordRaw[] = asyncRouterMap
        if (type === 'admin') {
          // 后端过滤菜单
          routerMap = generateRoutesFn2(routers as AppCustomRouteRecordRaw[]).concat(routerMap)
        } else if (type === 'test') {
          // 模拟前端过滤菜单
          routerMap = generateRoutesFn1(cloneDeep(asyncRouterMap), routers as string[])
        } else {
          // 直接读取静态路由表
          routerMap = cloneDeep(asyncRouterMap)
        }
        // 动态路由，404一定要放到最后面
        this.addRouters = routerMap.concat([
          {
            path: '/:path(.*)*',
            redirect: '/404',
            name: '404Page',
            meta: {
              hidden: true,
              breadcrumb: false
            }
          }
        ])
        // 渲染菜单的所有路由
        this.routers = cloneDeep(constantRouterMap).concat(routerMap)
        resolve()
      })
    },

这个方法有两个参数，第一个是指定模式，admin代表模式三，从后端接口拿到动态路由数据，第二个参数就是后端返回的路由数据。
再次，是将后端返回的路由数据，进行转换处理，成为前端需要的数据结构，需要调整/utils/routerHelper.ts中的
generateRoutesFn2方法。

// 后端控制路由生成
export const generateRoutesFn2 = (routes: AppCustomRouteRecordRaw[]): AppRouteRecordRaw[] => {
  const res: AppRouteRecordRaw[] = []

  for (const route of routes) {
    const data: AppRouteRecordRaw = {
      path: route.path,
      name: route.name,
      redirect: route.redirect,
      meta: route.meta
    }
    if (route.component) {
      const comModule =
        modules[`../modules/${route.component}.vue`] || modules[`../modules/${route.component}.tsx`]

      const component = route.component as string

      if (!comModule && !component.includes('#')) {
        console.error(`未找到${route.component}.vue文件或${route.component}.tsx文件，请创建`)
      } else {
        // 动态加载路由文件
        data.component =
          component === '#' ? Layout : component.includes('##') ? getParentLayout() : comModule
      }
    }
    // recursive child routes
    if (route.children) {
      data.children = generateRoutesFn2(route.children)
    }
    res.push(data as AppRouteRecordRaw)
  }
  return res
}

数据处理和转换，跟后端返回的数据结构有关系，特别是动态引入组件部分，需根据自己的情况进行适配调整。

完成上述操作后，动态路由就实现了，回到登录环节，实现加载动态路由，然后进入系统，默认加载第一个能找到的路由。

// 登录
const signIn = async () => {
  const formRef = unref(elFormRef)
  await formRef?.validate(async (isValid) => {
    if (isValid) {
      loading.value = true
      const { getFormData } = methods
      const formData = await getFormData<UserType>()


      try {
        const res = await loginApi(formData)


        if (res) {
          // 保存用户信息
          userStore.setUserAction(res.data)


          // 是否使用动态路由
          if (appStore.getDynamicRouter) {
            const routers = res.data.menuPermission || []
            await permissionStore.generateRoutes('admin', routers).catch(() => {})


            permissionStore.getAddRouters.forEach((route) => {
              addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
            })
            permissionStore.setIsAddRouters(true)
            push({ path: redirect.value || permissionStore.addRouters[0].path })
          } else {
            await permissionStore.generateRoutes('none').catch(() => {})
            permissionStore.getAddRouters.forEach((route) => {
              addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
            })
            permissionStore.setIsAddRouters(true)


            push({ path: redirect.value || permissionStore.addRouters[0].path })
          }
        }
      } finally {
        loading.value = false
      }
    }
  })
}

总结

今天主要介绍了如何对vue-element-plus-admin改造，实现系统登录、缓存用户数据以及动态路由。完成上述操作后，基本实现了前后端的打通工作。

开发平台资料

平台名称：一二三开发平台
简介： 企业级通用开发平台
设计资料：csdn专栏
开源地址：Gitee
开源协议：MIT