我遇到一个场景，该场景需要在React 应用中实现“使用Github登录”功能。虽然这听起来很简单，但在尝试做这件事时，你可能会遇到一些麻烦。因此，本文的目的是提供一个指南，帮助你在你的应用程序中实现这样的功能。让我们现在就开始吧！
步骤1：在Github上创建OAuth应用
按照此处提供的步骤登录到你的Github帐户并创建OAuth应用。注意：对于本例，在创建OAuth应用时，如果你在本地运行应用，可以将主页URL设置为http://localhost:3000/，将授权回调URL设置为http://localhost:3000/login。在根目录下创建一个 .env 文件，并设置这些变量：
REACT_APP_CLIENT_ID=你的Client ID REACT_APP_CLIENT_SECRET=你的Client Secret REACT_APP_REDIRECT_URI=http://localhost:3000/login 复制代码
步骤2：创建React应用
继续使用你的首选来创建你的react应用程序，在这个例子中，我们将使用Create-React-App。如果你使用这种模式，你必须删除index.css、App.css、App.test.js和serviceWorker.js等文件。编辑index.js，确保它看起来像这样：
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); 复制代码另外，编辑App.js，确保它看起来像这样：
import React, { createContext, useReducer } from 'react'; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import Home from "./components/Home"; import Login from "./components/Login"; import { initialState, reducer } from "./store/reducer"; export const AuthContext = createContext(); function App() { const [state, dispatch] = useReducer(reducer, initialState); return ( <AuthContext.Provider value={{ state, dispatch }} > <Router> <Switch> <Route path="/login" component={Login}/> <Route path="/" component={Home}/> </Switch> </Router> </AuthContext.Provider> ); } export default App; 复制代码在App.js文件中，导入2个组件（Home.js 和 Login.js ）。要创建这2个组件，进入src文件夹，创建一个名为component的文件夹，里面有2个文件（Home.js和Login.js）。在根文件夹中，你可以在下面运行此命令来创建它们。
mkdir -p src/components && cd src/components && touch Home.js Login.js 复制代码
接下来，你会观察到，我们从store导入了状态和reducer，继续并设置一个简单的store，它将保持应用程序状态。要做到这一点，导航到src文件夹中，并创建一个名为store的文件夹，在它里面创建一个名为reducer的子文件夹，并在reducer文件夹里面创建一个index.js文件。在根目录下，你可以运行下面这个命令来创建它们。
mkdir -p src/store/reducer && cd src/store/reducer && touch index.js 复制代码
Store中index.js文件的内容应如下所示。
export const initialState = { isLoggedIn: JSON.parse(localStorage.getItem("isLoggedIn")) || false, user: JSON.parse(localStorage.getItem("user")) || null, client_id: process.env.REACT_APP_CLIENT_ID, redirect_uri: process.env.REACT_APP_REDIRECT_URI, client_secret: process.env.REACT_APP_CLIENT_SECRET, proxy_url: process.env.REACT_APP_PROXY_URL }; export const reducer = (state, action) => { switch (action.type) { case "LOGIN": { localStorage.setItem("isLoggedIn", JSON.stringify(action.payload.isLoggedIn)) localStorage.setItem("user", JSON.stringify(action.payload.user)) console.log(action.payload.isLoggedIn) return { ...state, isLoggedIn: action.payload.isLoggedIn, user: action.payload.user }; } case "LOGOUT": { localStorage.clear() return { ...state, isLoggedIn: false, user: null }; } default: return state; } }; 复制代码它包含InitialState对象和一个reducer函数，该函数包含派发的动作以突变状态。
这时，我们就可以在我们的组件上下功夫了。让我们在Login.js上工作，这将是一个简单的组件，它有一个按钮，可以触发Github API的登录请求。
作者：杭州程序员张张
链接：https://juejin.cn/post/6909387010185232398
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。