React-Router,V6的权限控制实现示例

云计算

本文链接：https://beian.lu0.com/news/content/42050.html

React-Router,V6的权限控制实现示例

发布时间：2023-05-07

接口权限

　　接口权限一般是用户登录后，后端根据账号密码来认证和授权，并颁发token或者session等来保存用户登录状态。

　　后续客户端请求一般是在header中携带token，后端通过对token进行鉴权是否合法来控制是否可以访问接口。

　　一般后台会通过用户的角色等来做对应的接口权限控制。

　　而需要我们前端做的是在请求中携带好登录后回传的token,我们以axios为例

const instance = axios.create(config);

instance.interceptors.request.use(

(request: any) => {

request.headers[access_token] = localStorage.getItem(access_token);

returnrequest;

},

(err) => {

Promise.reject(err.response);

}

);

instance.interceptors.response.use(

(response) => {

if(response.status !== 200) returnPromise.reject(response.data);

if(response.data.code === 401) {

//token过期或者错误

window.location.replace(/login);

}

returnresponse.data.data;

},

(err) => {

Promise.reject(err.response);

}

);

页面权限

　　首先，我们先完成路由配置

　　src/routes/routes.tsx

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

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) => {

returnrouteList.map((route: RoutesType) => {

let element: ReactElement null= null;

if(route.children !!route.children.length) {

element = CreateHasChildrenRoute(route);

} else{

element = CreateNoChildrenRoute(route);

}

returnelement;

});

};

return(

<BrowserRouter>

<Routes>{RouteAuthFun(routers)}</Routes>

</BrowserRouter>

);

};

　　最后是只需要在入口中写入Root组件即可

ReactDOM.createRoot(document.getElementById(root) as HTMLElement).render(

<Provider store={store}>

<Root />

</Provider>

);

　　上面只是完成了基本的配置，下面才是权限相关

　　路由权限主要分为两个方向：

1. 菜单权限

　　一般来说，后台通过维护user、role、menu、user_role、menu_role这几张表来做相应的权限设计。

　　所以，在登录接口中，一般后台会返回用户对应的角色、菜单等信息。我们通过redux-toolkit保存登录数据。大致信息如下(未真正请求接。

负载均衡

云数据库

域名注册

常见问题

云计算