違背的青春

前言

專案目前採用的是通過前端配置需要許可權的路由，然後通過判斷過濾出符合當前角色的選單列表，但是把路由全部都寫到前端程式碼中，在目前看來安全性有所影響，所以改造了下，改造後採用的方式是後臺儲存選單資源資訊，在後端轉化成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

複製程式碼

3.修改src\permission.js把之前遍歷過濾路由的方法改成上面的方法

Spring Boot修改

1. 新建一個BuldTree類用來處理資料

package com.example.security.util;

import com.example.security.entity.Permission;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 * @Autoor:楊文彬
 * @Date:2019/1/18
 * @Description：
 */
@Slf4j
public class BulidTree {

    public static List<Menu> genRoot(List<Permission> permissions){

        List<Menu> trees = new ArrayList<Menu>();
        permissions.forEach(permission -> {
            if(permission != null){
                List<Permission> permissionList = permission.getChildren();
                Menu menu = new Menu();
                menu.setName(permission.getPer_name());
                menu.setPath(permission.getPer_resource());
                if(permission.getPer_parent_id().toString().equals("0")){
                    //一級選單的path需要加'/'
                    menu.setPath("/"+permission.getPer_resource());
                    //判斷component是否為空如果是空返回Layout給前端
                    menu.setComponent(StringUtils.isEmpty(permission.getPer_component()) ?"Layout" : permission.getPer_component());
                }else{
                    menu.setComponent(permission.getPer_component());
                }
                menu.setMeta(new MenuMetaVo(permission.getPer_name(),permission.getPer_icon()));
                //判斷是否有子路由
                if(permissionList != null && permissionList.size() != 0){
                    menu.setAlwaysShow(true);
                    menu.setRedirect("noredirect");
                    menu.setChildren(genRoot(permissionList));
                } else if (permission.getPer_parent_id().toString().equals("0")){
                    Menu menu1 = new Menu();
                    menu1.setMeta(menu.getMeta());
                    menu1.setPath("index");
                    menu1.setName(menu.getName());
                    menu1.setComponent(menu.getComponent());
                    menu.setName(null);
                    menu.setMeta(null);
                    menu.setComponent("Layout");
                    List<Menu> menuList = new ArrayList<Menu>();
                    menuList.add(menu1);
                    menu.setChildren(menuList);
                }
                trees.add(menu);
            }

        });
        return trees;
    }

}

複製程式碼

這個方法主要作用是處理，樹形選單然後轉換成Vue-Router格式。之前生成樹形的方法需要保留不過要修改下里面的引數。

2.增加MenuMetaVo主要是為了生成側邊欄的標題，和圖示

package com.example.security.util;

import lombok.Data;

/**
 * @Autoor:楊文彬
 * @Date:2019/1/18
 * @Description：
 */
@Data
public class MenuMetaVo {
    private String title;

    private String icon;

    public MenuMetaVo(String title, String icon) {
        this.title = title;
        this.icon = icon;
    }
}
複製程式碼

這樣就已經完成了。程式碼已經更新到GitHub上。有問題歡迎隨時聯絡我~

歡迎關注我的個人微信公眾號~