在一个后台管理系统中，安全是很重要的。不光后端需要做权限校验，前端也需要做权限控制。 我们可以大致将权限分为3种： 接口权限、页面权限、按钮权限。
在这当中，前端主要关注点则是页面权限，按钮权限，而前端做这些的主要目的则是：
- 禁止用户访问一些无权限访问的页面
- 过滤不必要的请求，减少服务器压力
下面主要是思路的整理，以及一些核心实现
接口权限
接口权限一般是用户登录后，后端根据账号密码来认证和授权，并颁发token或者session等来保存用户登录状态。
后续客户端请求一般是在header中携带token，后端通过对token进行鉴权是否合法来控制是否可以访问接口。
一般后台会通过用户的角色等来做对应的接口权限控制。
而需要我们前端做的是在请求中携带好登录后回传的token,我们以axios为例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const instance = axios.create(config);
instance.interceptors.request.use(
(request: any) => {
request.headers["access_token"] = localStorage.getItem("access_token");
return request;
},
(err) => {
Promise.reject(err.response);
}
);
instance.interceptors.response.use(
(response) => {
if (response.status !== 200) return Promise.reject(response.data);
if (response.data.code === 401) {
//token过期或者错误
window.location.replace("/login");
}
return response.data.data;
},
(err) => {
Promise.reject(err.response);
}
);
|
页面权限
首先，我们先完成路由配置
src/routes/routes.tsx
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
export type RoutesType = {
path: string;
element: ReactElement;
children?: RoutesType[];
};
const routers: RoutesType[] = [
{
path: "/login",
element: <Login />,
},
{
path: "/",
element: <Home />,
},
{
path: "/foo",
element: <Foo />,
children: [
{
path: "/foo/auth-button",
element: <MyAuthButtonPage />,
},
],
},
{
path: "/protected",
element: <Protected />,
},
{
path: "/unauthorized",
element: <UnauthorizedPage />,
},
// 配置404，需要放在最后
{
path: "/*",
element: <NotFound />,
},
];
|
然后是基于路由配置来生成对应的路由组件
src/routes/root.tsx
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
const Root = () => {
// 创建一个有子节点的Route
const CreateHasChildrenRoute = (route: RoutesType) => {
return (
<Route path={route.path} key={route.path}>
<Route
index
element={
<AuthRoute key={route.path} path={route.path}>
{route.element}
</AuthRoute>
}
/>
{route?.children && RouteAuthFun(route.children)}
</Route>
);
};
// 创建一个没有子节点的Route
const CreateNoChildrenRoute = (route: RoutesType) => {
return (
<Route
key={route.path}
path={route.path}
element={
<AuthRoute path={route.path} key={route.path}>
{route.element}
</AuthRoute>
}
/>
);
};
// 处理我们的routers
const RouteAuthFun = (routeList: any) => {
return routeList.map((route: RoutesType) => {
let element: ReactElement | null = null;
if (route.children && !!route.children.length) {
element = CreateHasChildrenRoute(route);
} else {
element = CreateNoChildrenRoute(route);
}
return element;
});
};
return (
<BrowserRouter>
<Routes>{RouteAuthFun(routers)}</Routes>
</BrowserRouter>
);
};
|
最后是只需要在入口中写入Root组件即可
|
1
2
3
4
5
|
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<Provider store={store}>
<Root />
</Provider>
);
|
上面只是完成了基本的配置，下面才是权限相关
路由权限主要分为两个方向：
1. 菜单权限
一般来说，后台通过维护user、role、menu、user_role、menu_role这几张表来做相应的权限设计。
所以，在登录接口中，一般后台会返回用户对应的角色、菜单等信息。我们通过redux-toolkit保存登录数据。大致信息如下(未真正请求接口，只写了初始数据):
src/pages/login/Login.slice.ts
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
interface LoginState {
username: string;
role: string;
menuLists: any[];
}
// Define the initial state using that type
const initialState: LoginState = {
username: "ryo",
role: "admin",
menuLists: [
{
id: "1",
name: "首页",
icon: "icon-home",
url: "/",
parent_id: "0",
},
{
id: "2",
name: "foo",
icon: "icon-foo",
url: "/foo",
parent_id: "0",
},
{
id: "2-1",
name: "auth-button",
icon: "icon-auth-button",
url: "/foo/auth-button",
parent_id: "2",
},
],
};
|
这里的role表示当前用户的角色,menuLists为用户可访问的菜单
然后在首页中生成菜单列表
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
const getMenuItem = (menus: any): any => {
return menus.map((menu: any) => {
if (menu.children) {
return (
<div key={menu.url}>
<Link to={menu.url}>{menu.name}</Link>
{getMenuItem(menu.children)}
</div>
);
}
return (
<div key={menu.url}>
<Link to={menu.url}>{menu.name}</Link>
</div>
);
});
};
function genMenu(array: any, parentId = "0") {
const result = [];
for (const item of array) {
if (item.parent_id === parentId) {
const menu = { ...item };
menu.children = genMenu(array, menu.id);
result.push(menu);
}
}
return result;
}
function Home() {
const menuLists = useAppSelector((state) => state.login.menuLists);
const menuTree = genMenu(menuLists);
return (
<div>
<h1>home page</h1>
{getMenuItem(menuTree)}
</div>
);
}
export default Home;
|
但是，只根据权限列表来动态生成菜单并不能完全实现权限相关的目的。用户还可以通过在地址栏输入url的方式来访问没有在菜单中显示的页面。
2. 路由权限
我们可以通过实现一个AuthRoute来解决上述的问题。
通过AuthRoute来拦截页面的访问操作。
src/routes/AuthRoute.tsx
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
// 无需权限认证的白名单
// 一般是前端的一些报错页
const DONT_NEED_AUTHORIZED_PAGE = ["/unauthorized", "/*"];
const AuthRoute = ({ children, path }: any) => {
// 该flag用于控制 受保护页面的渲染时机，需要等待useEffect中所有的权限验证条件完成后才表示可以渲染
const [canRender, setRenderFlag] = useState(false);
const navigate = useNavigate();
const menuLists = useAppSelector((state) => state.login.menuLists);
const menuUrls = menuLists.map((menu) => menu.url);
const token = localStorage.getItem("access_token") || "";
// 在白名单中的无需验证，直接跳转
if (DONT_NEED_AUTHORIZED_PAGE.includes(path)) {
return children;
}
useEffect(() => {
// 用户未登录
if (token === "") {
message.error("token 过期，请重新登录!");
navigate("/login");
}
// 已登录
if (token) {
// 已登录需要通过logout来控制退出登录或者是token过期返回登录界面
if (location.pathname == "/login") {
navigate("/");
}
// 已登录，根据后台传的权限列表做判断
if (!menuUrls.includes(location.pathname)) {
navigate("/unauthorized", { replace: true });
}
}
// 当上面的权限控制通过后，再渲染受保护的页面
setRenderFlag(true);
}, [token, location.pathname]);
if (!canRender) return null;
return children;
};
export default AuthRoute;
|
然后，在我们生成Route的时候在element属性中使用AuthRoute,这一步，我们已经在上面src/routes/root.tsx这个文件中写进去了。
到这里，我们就通过实现AuthRoute来拦截页面访问，做权限相关处理。
然后我们可以运行该仓库 代码来看效果。
目前没有实现登录相关功能，所以需要手动在localStorage中添加access_token来模拟登录。
- 如果没有登录(没有access_token)或者登录已过期，访问任何路由都会被路由到/login。
- 如果已经登录，但是再访问登录页面，会被路由到/首页
- 如果已经登录，但是访问了一个你无访问的页面,如/protected，则会被路由到/unauthorized页面
按钮权限
按钮级别的权限，根据当前用户角色的不同，可以看到的按钮和操作不同。这里我只简单实现了一个AuthButton
src/coponents/auth-button/index.tsx
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import { Button } from "antd";
import type { ButtonProps } from "antd";
import React from "react";
import { useAppSelector } from "../../hooks/typedHooks";
interface AuthButtonProps extends ButtonProps {
roles: string[];
}
const AuthButton: React.FC<AuthButtonProps> = ({ roles, children }) => {
const role = useAppSelector((state) => state.login.role);
if (roles.includes(role)) {
return <Button>{children}</Button>;
}
return null;
};
export default AuthButton;
|
使用方法如下，新增了一个roles属性，表示哪些角色可以看见该按钮
src/pages/foo/auth-button.tsx
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const ButtonPermission: React.FC = () => {
const role = useAppSelector((state) => state.login.role);
return (
<div>
<h1>Button Permission</h1>
<AuthButton roles={["admin", "user"]}>添加</AuthButton>
<AuthButton roles={["admin"]}>编辑</AuthButton>
<AuthButton roles={["admin"]}>删除</AuthButton>
</div>
);
};
export default ButtonPermission;
|
我们可以手动的修改Login.slice.ts中的role来查看不同的情况。
这种实现方式比较简单，大伙可以根据自己的具体场景选择更好的方案
|
