前端管理

按钮级别

基于角色的访问控制（RBAC）

不同身份渲染不同内容
前端在用户登录后，从后端获取用户的角色信息。
根据角色信息，前端可以动态地渲染菜单、按钮等UI元素，并控制这些元素的可见性和可点击性
可以通过封装全局指令或组件，结合后端返回的权限列表，实现按钮级别的权限控制。

页面级权限管理

路由守卫

初始化路由时，定义好所有需要权限校验的路由地址。
用户登录后，前端根据用户的角色信息，向后端请求用户的权限数据。
将请求到的权限数据与路由地址进行比对，筛选出用户可访问的路由。
使用路由守卫（如Vue Router的beforeEach钩子）进行权限校验，防止用户通过直接输入URL地址越权访问。

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/pageA',
        name: 'pageA',
        component: pageA,
    }
]
const router = new VueRouter({
  routes
});

// 路由守卫
router.beforeEach((to, from, next) => {
  if (to.name === 'login') {
    next()
  } else {
    const token = getToken()
    if(!token) next('/login')
    else next()
  }
})

export default router

动态添加路由

根据用户的角色和权限，动态地生成和添加路由。
这样可以确保用户只能看到和访问其被授权的页面。

简单案例

const router = new VueRouter([
  {
    path: "/",
    name: "Home",
    component: Home
  }
]);
let route=[
{
  path: '/pageA',
  name: 'pageA',
  component: pageA,
}]
router.addRoutes(route);
export default router

权限验证

let pageA,pageB,pageC;
let route=[
    {
      path: '/pageA',
      name: 'pageA',
      component: pageA,
    },
    {
      path: '/pageB',
      name: 'pageB',
      component: pageB,
    },
    {
      path: '/pageC',
      name: 'pageC',
      component: pageC,
    }
]

// 动态添加路由
let commonUser=['pageA','pageB'];
let commonUserRoute=route.filter(page => commonUser.includes(page.name))
router.addRoutes(commonUserRoute);

react-router6

请注意，这个例子是在组件加载时根据条件决定是否添加路由。如果你需要在应用程序运行时根据用户交互或其他事件动态更改路由，你可以将setDynamicRoutes函数传递给其他组件，并在需要时调用它以更新路由列表。

import { BrowserRouter as Router, Routes, Route, useRoutes } from 'react-router-dom';
import React, { useState } from 'react';

// 动态路由组件
function DynamicRoutes() {
  const [dynamicRoutes, setDynamicRoutes] = useState([
    { path: 'home', element: <Home /> },
    { path: 'about', element: <About /> },
  ]);

  // 假设你想根据某个条件动态添加路由
  const condition = true; // 这是一个条件，可以是任何你需要的逻辑

  if (condition) {
    setDynamicRoutes([
      ...dynamicRoutes,
      { path: 'dynamic-route', element: <DynamicPage /> },
    ]);
  }

  // 使用 useRoutes Hook 生成路由配置
  const element = useRoutes(dynamicRoutes);

  return element;
}

// 示例页面组件
function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function DynamicPage() {
  return <h1>Dynamic Page</h1>;
}

// 应用根组件
function App() {
  return (
    <Router>
      <DynamicRoutes />
    </Router>
  );
}

export default App;

后端管理

后端会把所有路由信息存在数据库中
用户登录后会根据角色权限查询到路由信息
最后前端通过router.addRouter()动态添加路由信息
纯前端方案的优点是实现简单，不需要额外权限管理页面，但是维护起来问题比较大，有新的页面和角色需求就要修改前端代码重新打包部署；
服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息，可谓一劳永逸！