快捷導(dǎo)航

react 通過(guò)后端接口實(shí)現(xiàn)路由授權(quán)的示例代碼

更新時(shí)間：2024年11月27日 09:45:13 作者：cangloe

本文主要介紹了React應(yīng)用中通過(guò)后端接口獲取路由授權(quán),實(shí)現(xiàn)動(dòng)態(tài)和靈活的權(quán)限管理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

創(chuàng)建一個(gè)高階組件（HOC）或自定義鉤子（hook）來(lái)封裝權(quán)限邏輯。
以下是一個(gè)詳細(xì)的示例，演示如何通過(guò)后端接口獲取路由授權(quán)并在 React 應(yīng)用中實(shí)現(xiàn)動(dòng)態(tài)路由權(quán)限控制。

1. 安裝必要的庫(kù)

npm install react-router-dom
npm install redux react-redux
npm install axios

2. 定義后端接口調(diào)用和權(quán)限存儲(chǔ)

// api.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://your-api-base-url.com',
});

export const login = async (username, password) => {
  const response = await api.post('/login', { username, password });
  return response.data;
};

export const getUserPermissions = async () => {
  const response = await api.get('/permissions');
  return response.data;
};

3. 創(chuàng)建 Redux Store

// store.js
import { createStore } from 'redux';

const initialState = {
  auth: {
    isAuthenticated: false,
    permissions: [],
  },
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        auth: {
          ...state.auth,
          isAuthenticated: true,
          permissions: action.payload.permissions,
        },
      };
    case 'LOGOUT':
      return {
        ...state,
        auth: {
          ...state.auth,
          isAuthenticated: false,
          permissions: [],
        },
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

4. 用戶(hù)登錄并獲取權(quán)限信息

// components/Login.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { login, getUserPermissions } from '../api';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const dispatch = useDispatch();
  const history = useHistory();

  const handleLogin = async () => {
    try {
      await login(username, password);
      const permissions = await getUserPermissions();
      dispatch({ type: 'LOGIN', payload: { permissions } });
      history.push('/');
    } catch (error) {
      console.error('Login failed', error);
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

5. 動(dòng)態(tài)生成路由

// App.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Home from './components/Home';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Login from './components/Login';
import PrivateRoute from './components/PrivateRoute';

const App = () => {
  const permissions = useSelector((state) => state.auth.permissions);

  const routes = [
    { path: '/', component: Home, roles: ['user', 'admin'], exact: true },
    { path: '/dashboard', component: Dashboard, roles: ['admin'] },
    { path: '/profile', component: Profile, roles: ['user', 'admin'] },
    { path: '/login', component: Login, roles: [] },
  ];

  const filteredRoutes = routes.filter((route) =>
    route.roles.some((role) => permissions.includes(role))
  );

  return (
    <Router>
      <Switch>
        {filteredRoutes.map((route, index) => (
          <PrivateRoute
            key={index}
            path={route.path}
            component={route.component}
            roles={route.roles}
            exact={route.exact}
          />
        ))}
        <Route path="/login" component={Login} />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
};

export default App;

6. 創(chuàng)建權(quán)限組件

// components/PrivateRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';

const PrivateRoute = ({ component: Component, roles, ...rest }) => {
  const { isAuthenticated, permissions } = useSelector((state) => state.auth);

  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated && roles.some((role) => permissions.includes(role)) ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

export default PrivateRoute;

總結(jié)

通過(guò)上述步驟，我們實(shí)現(xiàn)了通過(guò)后端接口獲取用戶(hù)權(quán)限并在 React 應(yīng)用中進(jìn)行動(dòng)態(tài)路由權(quán)限控制。這使得權(quán)限管理更加靈活和動(dòng)態(tài)，能夠根據(jù)用戶(hù)的不同權(quán)限進(jìn)行路由的動(dòng)態(tài)生成和控制。根據(jù)具體需求，可以進(jìn)一步優(yōu)化和擴(kuò)展權(quán)限邏輯。

到此這篇關(guān)于react 通過(guò)后端接口實(shí)現(xiàn)路由授權(quán)的示例代碼的文章就介紹到這了,更多相關(guān)react 路由授權(quán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: