A felhasználói hitelesítés beállítása a React, Redux és Redux Saga segítségével

FRISSÍTÉS (2019.02.12.): Nemrégiben frissítettem ezt a projektet a legfrissebb reak routerekkel, azaz a 4.3.1 verzióval, amely a reag-router-dom. A változások megtekintéséhez kérjük, menjen a tárházába.

Az előző blogomban írtam, hogyan kell skálázható architektúrát írni a Node.js-ben. Mivel postászt használtam a platform működésének tesztelésére, úgy gondoltam, hogy ez jó ötlet lenne, ha megvalósítanánk a kliens oldalt. Az ügyféloldal megírásához úgy döntöttem, hogy az alábbi technikai verem felhasználásával készülök:

  • Reagál
  • Redux
  • Redux-Saga
  • React Router

Ez a bejegyzés feltételezi, hogy már ismeri a Redux és a Redux-Saga reakcióit és alapfogalmait.

Elkezdeni

Klónozza az előző blogtáramat. CDa gyökérmappába, és futtassa npm install. Ez telepíti az összes függőséget.

Másodszor telepítse a mongodb fájlta gépedben. A telepítés után futtassa a mongo szervert amongodparancsot a terminálon, ha azt nem a gép szolgáltatásaként indítják.

Ezután ellenőrizze, hogy a nodemon csomag globálisan telepítve van-e a számítógépén . Lépjen a szerveroldali mappába, és futtassanodemon index.jsa háttérszerver futtatásához.

Most, hogy a háttérrendszerünk működik és fut, itt az ideje, hogy belevágjunk az ügyféloldali megvalósításba.

Ha még nem telepítette create-react-appmajd folytassa a következő paranccsal telepítse.

npm install create-react-app -g

Ez a parancs telepítésre kerül create-react-appglobálisan .

Hozza létre a projektet

Itt az ideje, hogy létrehozzon egy projektet. Használat:

create-react-app react-login

Ez egy új projektet hoz létre a névvel react-login. Menj előre, és cdebbe a mappába. Nyissa megpackage.jsonfájlt a kedvenc szerkesztőben, és adja hozzá a következő függőségeket:

Nincs szükségünk további tulajdonságokra ebben a package.jsonfájlban. Egyszerűen eltávolíthatjuk őket, de hagyom a helyzetet, és továbblépek, hogy a blog érdekes részéhez eljuthassunk.

Most egyszerűen fuss:

npm install

amely telepíti az összes fent említett függőséget.

Index fájl

Először nyissa meg a index.jsfájlt, és tegye az alábbi kódot ebbe a fájlba.

Ebben a kódban importáljuk reactés react-dom. Aztán importálunk Routerés browserHistoryonnan react-router. Ezekre az útválasztási célokra van szükség, amelyeket később aroutes/index.jsfájl. Ezután importáljuk Provider, ezt arra használják, hogy tárolja a gyermek alkotóelemeit.

configureStoreés routesezeket a következőket fogjuk importálni, és amelyeket egy másodperc alatt megvalósítok. Csak importálja őket a jelenlegi állapotában, és használja őket ebben a fájlban a fentiek szerint.

Most elkészült az indexfájlunk.

Store konfiguráció

Hozzon létre egy új mappát storebenne srcmappába. Az új mappa belsejében hozzon létre egy fájlt configureStore.js,és illessze be a következő kódot a fájlba.

Először importálunk createStore, amely megszokott lesz createStore, és applyMiddlewareamelyet felhasználunk, köztes árucikkeket alkalmazunk üzletünkben - ebben az esetben sagák, de később ebben a blogban fogunk foglalkozni ezzel - redux.

Ezután importáljuk rootReducer- ezt később fogjuk létrehozni. Egyelőre egyszerűen importálja és használja úgy, ahogy van. Ezt követi a függvény configureStore, amely egy objektumot ad vissza azzal, hogy meghívja a createStorefüggvényt és átadja rootReducerparaméterként.

Végül elérhetővé export configureStoreteszi configureStorea index.jskorábban összeállított fájlban.

Most ez nincs a mi utunkban, folytassa és hozza létre a src/reducersmappába hozzon létre index.js fájlt, és illessze be az alábbi kódot ebbe a fájlba.

Ez a fájl felelős a szűkítők mappájában lévő többi reduktor importálásáért, egyesítéséért és exportálásáért, hogy elérhetőek legyenek configureStore.js. Változásokat fogunk végrehajtani ezen a fájlon, amikor új reduktorokat adunk hozzá a blog későbbi részében.

Routing fájl

Az útvonalfájl ideje. Menjen előre, és hozza létre asrc/routesmappába és ezen a mappán belül hozzon létre egy index.jsfájl. Most nyissa meg és illessze be az alábbi kódot.

A fájl fő célja az útválasztás kezelése a projektünkben. A fájl importálja React, Routeés IndexRoute. Ezután szükségünk van egy konténerre, ebben az esetben importálok container/App, amelyet hamarosan meg is írunk. A következő az RegisterPage, ami egy komponens, és ezt is meg fogjuk írni.

A szülőben Route, amikor az otthoni út megegyezik, akkor egyszerűen megadjuk a Appkonténerünket. A IndexRoutefelhasználók látni fogják, hogy RegisterPagemelyik kerül megjelenítésre a Apptárolóban.

Tartály

Itt az ideje a konténernek. Folytassa, és készítsen egy új mappát container. A mappa belsejében hozzon létre egy új nevű fájlt, App.jsés tegye az alábbi kódot ebbe a fájlba.

Ez elég egyértelmű. A fájl fő célja a többi komponens renderelése.{this.props.children}ezt a célt szolgálja.

Bejegyzés

Itt az ideje registerPage. Hozzon létre egy új mappátsrc/componentsés hozzon létre egy összetevőt a komponensek mappábanregisterPage.js. Illessze be az alábbi kódot ebbe az összetevőbe.

Egyelőre ez egy nagyon egyszerű összetevő. Ezt később módosítjuk, hogy regisztrációs űrlapot adjunk hozzá, és bizonyos funkciókat tegyünk bele.

Kimenet

Miután létrehozta az összes fenti mappát és fájlt, futtassa npm starta projektben, és nyissa meg//localhost:3000a böngészőben. Látnia kell az alábbi eredményt.

Az itt történő bejelentkezés gombra kattintva nem irányul át a bejelentkezési útvonalra, amelyet a következő lépésben rögzítünk.

Működtetni

útvonalválasztás

Az útválasztás működéséhez először készítsen egy új összetevőt a components mappában. Nevezze el, loginPage.jsés helyezze az alábbi kódot ebbe az összetevőbe.

Ez az összetevő nagyon egyszerű. Megjeleníti az alaptartalmat és egy linket az összetevő regisztrálásához.

Most nyissa meg a routes.jsfentiekben már létrehozott fájlt, és hajtsa végre a következő módosításokat.

Változtassa meg az index útvonalát, LoginPagemert azt akarjuk, hogy a felhasználók a belépési összetevőre kerüljenek, amikor meglátogatják a kezdőlapot. Mielőtt ezt megtenné, importálja a komponensek mappából.

Most frissítse a böngészőt, és loginPageelőször látnia kell . Amikor rákattint a „Regisztráció itt” linkre, registerPagemeg kell jeleníteni.

Most már működnek az alapvető útvonalak.

Bejelentkezés és regisztráció

Bejegyzés

Annak érdekében, hogy a bejelentkezési folyamat működőképes legyen, először a regisztrációs folyamatot fogom kezelni, hogy felvegyünk néhány felhasználót az adatbázisunkba. Tehát folytassuk, és nyissuk meg, components/registerPage.jsés frissítsük az alábbi tartalommal.

Úgy tűnik, hogy sok fájl van ebben a fájlban, de ez mind egyszerű. Először importálunkconnecthogy összekössük storearegisterPageösszetevő. Aztán importálunkregisterUserActionamelyet legközelebb írunk.

A renderfüggvényen belül először a kiszolgáló válaszát vizsgálom, ha létezik, majd hozzárendelem a szervertől kapott siker- és üzenet tulajdonságokat. Ez lehet egy külön funkció, de az egyszerűség kedvéért elhelyeztem őket a renderfüggvényben.

Ezután van egy regisztrációs űrlap. Amikor a felhasználó a regisztráció gombra kattint, elindítja azt a onHandleRegistrationfunkciót, amely a felhasználó által megadott adatokat kapja meg az űrlapból, ésdispatch registerUserActionadataikkal mint paraméterekkel. A következő lépésben műveleteket fogunk írni.

Ahhoz, hogy a fenti kód működjön, szükségünk van mapStateToProps, ahogy az alkatrész alján is csináljuk, majd registerPagea végén csatlakoztassuk a komponenshez.

Műveletek

Itt az ideje a műveletek hozzáadásához. Menjen előre, és hozza létre asrc/actionsmappába. Hozza létre aindex.jsfájlt, és tegye bele az alábbi kódot.

Ez a kód exportál néhány állandót, amelyeket a projektünk során használni fogunk.

Most megy előre, és hozza létre a authenticationActions.jsfájlt ugyanabba a mappába, és tegye bele az alábbi kódot.

Itt importálom az indexállományt, amely állandókat exportál, majd export registrationUserActionvisszaküldök egy objektumot művelettípussal és felhasználói adatokkal. A művelet típusa ebben az esetben a REGISTER_USER. Ez a művelet akkor lesz elküldve, amikor a felhasználó megpróbál regisztrálni, és ez az akció elérhető lesz a projektünk során, amelyet meghallgatunk a sagáinkban.

Ságák

Most vagyunk abban a szakaszban, ahol bemutathatjuk a sagáinkat a projektünkben. Ha Ön még nem ismeri a Redux-Saga-t, akkor javasoljuk, hogy folytassa a blogot.

Ha már tud a sagákról, akkor folytassa, és hozzon létre egy src/sagasmappába. Hozza létre aindex.jsfájlt, és helyezze be az alábbi kódot ebbe a fájlba.

A fenti fájlt, először én importáló forkszármazó effectséswatchUserAuthenticationfrom watchers- ami még nem létezik, de ezt a fájlt majd legközelebb elkészítjük. Aztán egyszerűen exportálok egy generátorfüggvényt és elágazom a watchUserAuthentication.

Most folytassa, hozzon létre egy watcher.jsfájlt ugyanabban a mappában, mint fent, és helyezze az alábbi kódot ebbe a fájlba.

Ismét importálok takeLatesthatása redux-saga, majd registerSagaonnan authenticationSaga.js, amelyet legközelebb létrehozunk. Ezután importálja actions/index.jstípusként.

Egy olyan generátor funkciót exportálok, amely alapvetően figyeli az REGISTER_USERakciót, és felhívja registerSaga.

Most hozzunk létre egy authenticatioSaga.jssagát a fenti mappában, és helyezzük az alábbi kódot ebbe a fájlba.

Ebben a ságában még néhány effektust importálok - putés callonnan redux-saga. Aztán registerUserServicebehozott service/authenticationService.js. Minden műveletet típusként importálok innen actions/index.js:. Akkor exportálom a generátor funkciót registerSaga.

Ez a funkció felelős a registerUserServicehívásért, amely ajax hívást kezdeményez a szerverünkön az új felhasználó regisztrálásához - amelyet e lépés után írok. Válaszot kap, registerUserServiceés megteszi a REGISTER_USER_SUCCESScselekvést. Ha hiba történik, akkor a REGISTER_USER_ERRORműveletet végrehajtja.

Importálja a sagákat

Most, hogy megvannak a sagáink, itt az ideje, hogy importáljuk őket az üzletünkbe. Nyissa meg store/configureStore.jsés frissítse annak tartalmát az alábbi tartalommal.

Itt vagyok importáló createSagaMiddleware, rootReducerés rootSaga. Ezután a configureStorefüggvényen belül létrehozok egy újat, sagaMiddlewareés átadom createStorea applyMiddlewarefüggvény használatának. Végül a rootSaga.

Itt az ideje, hogy létrehozza a src/servicesmappát, és hozzon létre egy új első szolgáltatást. Nevezd megauthenticationService.jsés helyezze be az alábbi kódot ebbe a szolgáltatásba.

Ez a fájl egy alap ajax kérést hajt végre a letöltési API használatával, néhány paraméterrel és fejléccel. Ez egy nagyon magától értetődő szolgáltatás.

Csökkentő

Most, hogy kérést intézünk a szerverhez, itt az ideje, hogy megkapjuk ezt a választ az összetevőnkben. Ehhez szükségünk van egy reduktorra . Menj előre, és hozz létre egyreducers/registerReducer.jsfájlt, és tegye bele az alábbi kódot.

Ez egy egyszerű szűkítő funkció, amely állapotot kap és új állapotot ad vissza. Ellenőrzi REGISTER_USER_SUCCESSés REGISTER_USER_ERRORvégrehajtja az új állapotot az összetevő számára.

Most menj előre, és nyisd ki a src/reducers/index.jsfájlt, és frissítse a következő tartalommal.

Ebben rootReducerimportálok minden reduktort, majd exportálás előtt kombinálom őket. Pontosan ezzel csinálom register.

A frissített kód futtatása

Most végeztünk a regisztrációval. Itt az ideje, hogy frissítse a böngészőt, lépjen a regisztrációs útvonalra, és adjon meg néhány adatot. Ha meglévő e-mailt ír be, akkor az alábbi eredményt kell látnia.

Ha új e-mailt ad meg, akkor át kell irányítania a címre loginPage, amelyet legközelebb végrehajtunk.

Belépés

Itt az ideje, hogy bejelentkezés után belépjünk a felhasználóba. Menj előre és nyisd kicomponents/loginPage.jsfájlt, és frissítse a következő tartalommal.

Ez az összetevő nagyjából megegyezik a registerPage. Az egyetlen különbség az, hogy elküldiloginUserActionamelyet legközelebb írunk. További különbség, hogy ha a szerver válasza sikeres, akkor a JWT token. A tokent tárolom localStorage. Használhat más módszert is, de ebben a példában ezt a megközelítést használom.

Menj előre és nyisd ki actions/authenticationActions.jsés frissítse a következő tartalommal.

Itt exportálom az új loginUserActionfüggvényt a LOGIN_USERművelet típusával és user payload.

Mielőtt továbblépne, folytassa, nyissa meg a actions/index.jsfájlt, és frissítse annak tartalmát az alábbiak szerint.

Most menj előre, és nyisd ki a sagas/watchers.jsfájlt, és frissítse annak tartalmát a következőkkel.

Itt egyszerűen importálom loginSagaés hívom, amikor megkapja aLOGIN_USERakció.

Még nincs loginSaga. Ezért folytassa és nyissa ki asagas/authenticationSaga.jssaga és frissítse annak tartalmát a következőkkel.

Itt vagyok importáló kiegészítő szolgáltatás - loginUserService, ami azt fogja végrehajtási mellett -, majd az exportáló az új generátor funkció elemzi loginSaga, amelyek nem eléggé sok ugyanaz, mint a registerSaga.

Most nyissa meg a services/authenticationService.jsszolgáltatást, és frissítse annak tartalmát a következőkkel.

Itt hozzáadom a loginUserService szolgáltatást, amely nagyjából ugyanazt csinálja, mint a registerUserService, azaz ajax kérést küldök a felhasználó bejelentkezéséhez.

Most, hogy sikeresen elküldtünk egy kérést a szervernek, itt az ideje, hogy választ kapjon a szerverünktől a bejelentkezési komponensünkre. Ehhez hozzon létre egy új reduktort / loginReducer.js szűkítőt, és tegye bele az alábbi kódot.

Nagyjából ugyanazt csinálja, mint registerReducer- hallgat LOGIN_USER_SUCCESSés cselekszik LOGIN_USER_ERROR, és visszaadja az új állapotot.

Most nyissa meg a reducers/index.jsfájlt, és frissítse annak tartalmát az alábbi kóddal.

Itt importálom loginReducerés egyesítem vele, registermielőtt visszaküldeném rootReducer.

Ezt követően frissítse a böngészőt, és írjon be egy még nem regisztrált e-mailt. A bejelentkezési gomb megnyomása után látnia kell az alábbi eredményt.

Ha bejegyzett e-mailt ad meg, akkor a kérésnek sikeresnek kell lennie, de még nem kellene látnia semmit, mivel még nem hajtottam végre a dashboardPageösszetevő. Ehhez csak a sikeres hitelesítést követően lehet hozzáférni. Miután ezt mondtam, hajtsuk végre.

Irányítópult oldal

Most hozza létre a components/dashboardPage.jskomponenst, és tegye az alábbi kódot ebbe az összetevőbe.

Ez egy nagyon egyszerű összetevő - mindössze annyit tesz, hogy visszaadja a Dashboardszöveget.

Most nyissa meg a routes/index.jsútvonalat, és frissítse annak tartalmát a következőkkel.

Itt csinálok néhány új dolgot. Először importálok egy dashboardPageés hozzáadom route. Amikor azdashboardelérte az útvonalat, a requireAuthfunkció elindul. Ez a funkció ellenőrzi, hogy a felhasználó van-e loggedInvagy sem. Ennek ellenőrzésére keresemtokenban localStorage, amelyet loginPagesikeres bejelentkezéskor az összetevőben tároltam. Ha létezik, akkor dashboardPagemegjeleníti a felhasználó számára.

Most, amikor frissíti az oldalt a böngészőben, beír egy regisztrált e-mailt és megnyomja az Enter billentyűt, látnia kell az alábbi eredményeket.

Tehát itt van, ez egy teljes bejelentkezési rendszer, amely a React, a Redux és a Redux-Saga programokat használja. Ha szeretné látni az egész projektet, klónozza ezt az adattárat.

Remélem tetszett ez a bejegyzés.