浅谈前端角色权限方案

   export const routes = [
      {
         path: '/login', //登录页面
         name: 'Login',
         component: Login,
      },
      {
         path:"/register", // 列表页
         name:"Register",
         component: Register, 
      },
      {
         path:"/list", // 列表页
         name:"List",
         meta:{
            need_login:true //需要登录
         }
      }
    ]

router.beforeEach((to, from, next) => {
  const { need_login = false } = to.meta;
  const { user_info } = store.state; //从vuex中获取用户的登录信息
  if (need_login && !user_info) {
    // 如果页面需要登录但用户没有登录跳到登录页面
    const next_page = to.name; // 配置路由时,每一条路由都要给name赋值
    next({
      name: 'Login',
      params: {
        redirect_page: next_page,
        ...from.params, //如果跳转需要携带参数就把参数也传递过去
      },
    });
  } else {
    //不需要登录直接放行
    next();
  }
});

  // 引入无需登录的页面
  import invisible from './invisible';

  let router = new Router({
    routes: [
      ...invisible,
    ],
  });

  const invisibleMap = [];
  invisible.forEach(item => {
    if (item.name) {
      invisibleMap.push(item.name);
    }
  });

  router.beforeEach(async (to, from, next) => {
    if (!invisibleMap.includes(to.name)) {
        // 业务逻辑判断登录等
    }
    else {
      next();
    }
  })

 export const permission_list = {
   member:["List","Detail"], //普通成员
   admin:["List","Detail","Manage"],  // 管理员
   super_admin:["List","Detail","Manage","Admin"]  // 超级管理员
 }

 {
  user_id:1,
  user_name:"刘某",
  permission_list:["List","Detail","Manage"]
}

    //静态路由
    export const invisible = [
      {
         path: '/login', //登录页面
         name: 'Login',
         component: Login,
      },
      {
         path:"/", // 首页
         name:"Home",
         component: Home, 
      }
    ]
    
    //动态路由
    export const dynamic_routes = [
       {
           path:"/list", // 列表页
           name:"List",
           component: List
       },
       {
           path:"/detail", // 详情页
           name:"Detail",
           component: Detail
       },
       {
           path:"/manage", // 管理页
           name:"Manage",
           component: Manage
       },
       {
           path:"/admin", // 超级管理页
           name:"Admin",
           component: Admin
       }
    ]

import store from "@/store";

export const invisible = [...]; //静态路由

export const dynamic_routes = [...]; //动态路由

const router = createRouter({ //创建路由对象
  history: createWebHashHistory(),
  routes,
});

//动态添加路由
if(store.state.user != null){ //从vuex中拿到用户信息
    //用户已经登录
    const { permission_list } = store.state.user; // 从用户信息中获取权限列表
    const allow_routes = dynamic_routes.filter((route)=>{ //过滤允许访问的路由
      return permission_list.includes(route.name); 
    })
    allow_routes.forEach((route)=>{ // 将允许访问的路由动态添加到路由栈中
      router.addRoute(route);
    })
}

export default router;

  const routes = [
  {
    path: '/',  //标签容器
    name: 'Tabs',
    component: Tabs,
    children: [{
       path: '', //首页
       name: 'Home',
       component: Home,
    }]
  }
]

export const dynamic_routes = [
  {
      path:"/list", // 列表页
      name:"List",
      component: List
  }
]

   router.addRoute("Tabs", {
        path: "/list",
        name: "List",
        component: List,
 });

 {
   "home": {
     "id":"100",
     "name":"home",
     "desc":"首页",
     "value":true,
     "children": [],
   }
 }

// 生成过滤路由和菜单的方法  
function filterRouter(arr, obj, type) {
  if (Array.isArray(obj)) {
    // 数组处理
    obj.forEach(item => {
      handleRouterItem(arr, item, type);
    });
  } else {
    // 对象处理
    for (let item in obj) {
      handleRouterItem(arr, obj[item], type);
    }
  }
}

// 处理每个元素节点
function handleRouterItem(arr, item, type) {
  // 确定这个页面或模块是不展示的
  if (item.value === false) {
    if (type === 'menu') {
      assistance(arr, routerMap[item.name]);
    } else {
      assistanceRouter(arr, routerMap[item.name]);
    }
  } else if (!item.isPage && item.childrens && item.childrens.length > 0) {
    filterRouter(arr, item.childrens, type);
  }
}

function assistanceRouter(arr, name, obj) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].name === name) {
      // 无权限页面设置meta字段或者直接删除
      Vue.prototype.$set(arr[i].meta, 'hasRoleAuth', false);
      return true;
    } else {
      if (arr[i].children && arr[i].children.length > 0) {
        if (assistanceRouter(arr[i].children, name, arr[i])) {
          return;
        }
      }
    }
  }
}

// router为所有页面的路由结构，roleRouter为后端返回的角色权限对象
filterRouter(router, roleRouter);

  const router = useRouter(); // 获取路由实例
  const logOut = () => { //登出函数
      //将整个路由栈清空
      const old_routes = router.getRoutes();//获取所有路由信息
      old_routes.forEach((item) => {
        const name = item.name;//获取路由名词
        router.removeRoute(name); //移除路由
      });
      //生成新的路由栈
      routes.forEach((route) => {
        router.addRoute(route);
      });
      router.push({ name: "Login" }); //跳转到登录页面
    };

 {
  user_id:1,
  user_name:"张三",
  permission_list:{
    "List":"CR", //权限编码
    "Detail":"CURD"  //权限编码
  }
}

import router from './router';
import store from './store';

const app = createApp(App); //创建vue的根实例

app.directive('permission', {
  mounted(el, binding, vnode) {
    const permission = binding.value; // 获取权限值
    const page_name = router.currentRoute.value.name; // 获取当前路由名称
    const have_permissions = store.state.permission_list[page_name] || ''; // 当前用户拥有的权限
    if (!have_permissions.includes(permission)) {
      el.parentElement.removeChild(el); //不拥有该权限移除dom元素
    }
  },
});

<template>
    <div>
      <button v-permission="'U'">修改</button>  <button v-permission="'D'">删除</button>
    </div>
    <p>
      <button v-permission="'C'">发布需求</button>
    </p>

    <!--列表页-->
    <div v-permission="'R'">
     ...
    </div>
</template>