Spring Security(四):更新前端路由获取方式

2023-07-04 15:30:33 spring 更新 获取 方式 路由
违背的青春

前言

项目目前采用的是通过前端配置需要权限的路由，然后通过判断过滤出符合当前角色的菜单列表，但是把路由全部都写到前端代码中，在目前看来安全性有所影响，所以改造了下，改造后采用的方式，后台存储菜单资源信息，在后端转化成Vue-Router能使用的路由格式，就像下面这样


之前前端配置路由


终实现的效果是一样的。


更改Vue

  1. 修改src\router\index.js把之前在前端配置路由删除
  2. 修改src\store\modules\permission.js如下图增加了filterAsyncRouter方法，这个方法就是为了遍历后台传过来的路由数据，进行一些格式上的转换
import { constantRouterMap } from '@/router'
import Layout from '@/views/layout/Layout'
const permission = {
  state: {
    routers: constantRouterMap,
    apiRouters: [] // 后台接口获取得到的路由(per_resource)
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.apiRouters = routers
      state.routers = constantRouterMap.concat(routers)
    }
  },
  actions: {
    GenerateRoutes({ commit }, data) {
      return new Promise(resolve => {
        commit('SET_ROUTERS', data)
        resolve()
      })
    }
  }
}

export const filterAsyncRouter = (routers) => { // 遍历后台传来的路由字符串，转换为组件对象
  const backAsyncRouter = routers.filter(router => {
    if (router.component) {
      // Layout布局特殊处理
      if (router.component === 'Layout') {
        router.component = Layout
      } else {
        const component = router.component
        router.component = loadView(component)
      }
    }
    if (router.children && router.children.length > 0) {
      router.children = filterAsyncRouter(router.children)
    }
    return true
  })
  return backAsyncRouter
}

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

export default permission

相关文章