如何按角色剥夺 React 中的路由

Question

我有 2 条路线，每条路线都针对一种类型的用户，我该如何做，我已经有了我的授权，但我不知道该怎么做。如果有人知道或看过这方面的任何文档，请把它放在下面，我整天都在找这个

import React, { createContext, useState, useEffect } from 'react'
import { useNavigate } from "react-router-dom";
import axios from '../services/api';

export const AuthContext = createContext()

export const AuthProvider = ({ children }) => {
  const navigate = useNavigate();
  const [user, setUser] = useState()
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    const recoveredUser = localStorage.getItem('user')
    if (recoveredUser) {
      const jsonUser = JSON.parse(recoveredUser)
      axios.defaults.headers.common['Authorization'] = `Bearer ${jsonUser.token}`;
      setUser(jsonUser)
      navigate('/user')
    }
    setLoading(false)
  }, [])
  const login = (data) => {
    if (data) {
      localStorage.setItem('user', JSON.stringify(data))
      setUser(data)
      navigate('/user')
    }
  }
  const logout = () => {
    localStorage.removeItem('user')
    setUser("")
    navigate('/login')
  }
  return (
    <AuthContext.Provider value={{ authenticated: !!user, user, loading, login, logout }}>
      {children}
    </AuthContext.Provider>
  )
}

Answer 1

Kent C Dodds 有一篇关于此的非常好的文章以及我在我的应用程序中遵循的内容。 https://kentcdodds.com/blog/authentication-in-react-applications

因为您的 user 在您的上下文中，所以您可以检查您的路线在哪里呈现。

import { Routes } from 'react-router-dom'
import { useAuth } from './context/auth'

function App() {
  const { user } = useAuth();
  return user ? <AuthenticatedApp /> : <UnauthenticatedApp />
}

function AuthenticatedApp () {
 return (
  <Routes>
    // all your authenticated routes
  </Routes>
 )
}

function UnauthenticatedApp () {
 return (
  <Routes>
    // all your un authenticated routes
  </Routes>
 )
}

在我的示例中，我创建了一个 useAuth() 挂钩，您必须在文件中执行该挂钩。

function useAuth() {
  const context = useContext(AuthContext);
  return context;
}

export { useAuth };

如何按角色剥夺 React 中的路由

How to deprive routes in React by role

jsx

reactjs

react-router