Xử lý việc gắn kết và gỡ bỏ các tuyến dẫn hướng trong React Native

[theanh]

Trong bài viết này, chúng ta sẽ tìm hiểu cách gắn kết và hủy gắn kết các tuyến dẫn hướng trong React Native. Một hành vi mong đợi của ứng dụng của bạn là khi điều kiện xác thực được đáp ứng, một tập hợp các tuyến dẫn hướng mới chỉ khả dụng cho những người dùng đã đăng nhập, trong khi các màn hình khác được hiển thị trước khi xác thực sẽ bị xóa và không thể quay lại trừ khi người dùng đăng xuất khỏi ứng dụng.

Để bảo mật cho ứng dụng của bạn, các tuyến được bảo vệ cung cấp cho bạn một cách để chỉ hiển thị một số thông tin/nội dung nhất định trên ứng dụng của bạn cho những người dùng cụ thể, đồng thời hạn chế quyền truy cập từ những người không được phép.

Chúng ta sẽ làm việc với Expo cho dự án này vì nó sẽ giúp chúng ta tập trung vào vấn đề trước mắt thay vì lo lắng về nhiều thiết lập. Các bước chính xác giống như trong bài viết này có thể được thực hiện cho một ứng dụng React Native đơn thuần.

Bạn cần có một số hiểu biết về JavaScript và React Native để thực hiện theo hướng dẫn này. Sau đây là một số điều quan trọng mà bạn đã quen thuộc:

• Các thành phần tùy chỉnh trong React Native (cách tạo thành phần, nhận, truyền và sử dụng props trong thành phần). Đọc thêm.
• Điều hướng React. Đọc thêm.
• Stack Navigator trong React Native. Đọc thêm.
• Kiến thức cơ bản về các thành phần cốt lõi của React Native (, , v.v.). Đọc thêm.
• React Native AsyncStorage. Đọc thêm.
• Context API. Đọc thêm.

Thiết lập dự án và xác thực cơ sở​

Nếu bạn mới sử dụng expo và không biết cách cài đặt expo, hãy truy cập tài liệu chính thức. Sau khi cài đặt hoàn tất, hãy khởi tạo một dự án React Native mới với expo từ dấu nhắc lệnh của chúng tôi:

expo init navigation-project

Bạn sẽ được cung cấp một số tùy chọn để chọn cách bạn muốn thiết lập cơ sở:



Trong trường hợp của chúng ta, hãy chọn tùy chọn đầu tiên để thiết lập dự án của chúng ta dưới dạng một tài liệu trống. Bây giờ, hãy đợi cho đến khi quá trình cài đặt các phụ thuộc JavaScript hoàn tất.

Sau khi ứng dụng của chúng ta được thiết lập, chúng ta có thể thay đổi thư mục của mình thành thư mục dự án mới và mở nó trong trình soạn thảo mã yêu thích của bạn. Chúng ta cần cài đặt thư viện sẽ sử dụng cho AsyncStorage và các thư viện điều hướng của chúng ta. Bên trong thư mục thư mục trong thiết bị đầu cuối của bạn, hãy dán lệnh ở trên và chọn một mẫu (trống sẽ hoạt động) để cài đặt các phụ thuộc cho dự án của chúng ta.

Hãy xem từng phụ thuộc này dùng để làm gì:

• @react-native-community/async-storage
  Giống như localStorage trên web, đây là API React Native để lưu trữ dữ liệu trên thiết bị theo cặp khóa-giá trị.
• @react-native-community/masked-view, react-native-screens, react-native-gesture-handle
  Các phụ thuộc này là các tiện ích cốt lõi được hầu hết các trình điều hướng sử dụng để tạo cấu trúc điều hướng trong ứng dụng. (Đọc thêm trong Bắt đầu với điều hướng React Native.)
• @react-navigation/native
  Đây là phần phụ thuộc cho điều hướng React Native.
• @react-navigation/stack
  Đây là phần phụ thuộc cho điều hướng ngăn xếp trong React Native.

npm install @react-native-community/async-storage @react-native-community/masked-view @react-navigation/native @react-navigation/stack react-native-screens react-native-gesture-handle

Để bắt đầu ứng dụng, hãy sử dụng expo start từ thư mục ứng dụng trong thiết bị đầu cuối của bạn. Sau khi ứng dụng được bắt đầu, bạn có thể sử dụng ứng dụng expo từ điện thoại di động của mình để quét mã vạch và xem ứng dụng hoặc nếu bạn có trình giả lập Android/trình mô phỏng IOS, bạn có thể mở ứng dụng thông qua chúng từ công cụ dành cho nhà phát triển expo mở ra trong trình duyệt của bạn khi bạn bắt đầu ứng dụng expo. Đối với các ví dụ hình ảnh trong bài viết này, chúng tôi sẽ sử dụng Genymotions để xem kết quả của chúng tôi. Đây là kết quả cuối cùng của chúng ta sẽ trông như thế nào trong Genymotions:

Cấu trúc thư mục​

Chúng ta hãy tạo cấu trúc thư mục ngay từ đầu để dễ dàng làm việc với cấu trúc này hơn khi tiến hành:

Trước tiên, chúng ta cần hai thư mục:

• context
  Thư mục này sẽ lưu trữ ngữ cảnh cho toàn bộ ứng dụng của chúng ta vì chúng ta sẽ làm việc với API ngữ cảnh cho toàn cục quản lý trạng thái.
• views
  Thư mục này sẽ chứa cả thư mục điều hướng và chế độ xem cho các màn hình khác nhau.

Tiếp tục và tạo hai thư mục trong thư mục dự án của bạn.

Bên trong thư mục ngữ cảnh, tạo một thư mục có tên là authContext và tạo hai tệp bên trong thư mục authContext:

• AuthContext.js,
• AuthState.js.

Chúng ta sẽ cần những tệp này khi bắt đầu làm việc với Context API.

Bây giờ, hãy đến thư mục views mà chúng ta đã tạo và tạo thêm hai thư mục bên trong đó, cụ thể là:

• navigation,
• screens.

Bây giờ, chúng ta vẫn chưa hoàn tất, bên trong thư mục screens, hãy tạo thêm hai tệp này thư mục:

• postAuthScreens,
• preAuthScreens.

Nếu bạn thực hiện đúng thiết lập thư mục, đây là cấu trúc thư mục của bạn hiện tại:

Tạo màn hình đầu tiên của chúng ta​

Bây giờ chúng ta hãy tạo màn hình đầu tiên và gọi nó là welcomeScreen.js bên trong thư mục preAuthScreens.

preAuthScreens > welcomeScreen.js

Đây là nội dung của tệp welcomeScreen.js của chúng tôi:

import React from 'react';import { View, Text, Button, StyleSheet, TextInput } from 'react-native';const WelcomeScreen = () => { const onUserAuthentication = () => { console.log("Nút xác thực người dùng đã nhấp") } return (  Chào mừng đến với Ứng dụng của chúng tôi!      )}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, header: { fontSize: 25, fontWeight: 'bold', marginBottom: 30 }, inputs: { width: 300, height: 40, marginBottom: 10, borderWidth: 1, }})export default WelcomeScreen

Đây là những gì chúng tôi đã làm trong khối mã ở trên:

Đầu tiên, chúng tôi đã nhập những thứ cần thiết từ thư viện React Native, cụ thể là View, Text, Button, TextInput. Tiếp theo, chúng ta tạo thành phần chức năng WelcomeScreen.

Bạn sẽ thấy rằng chúng ta đã nhập StyleSheet từ React Native và sử dụng nó để xác định kiểu cho tiêu đề và cả .

Cuối cùng, chúng ta xuất thành phần WelcomeScreen ở cuối mã.

Bây giờ chúng ta đã hoàn tất việc này, hãy để thành phần này hoạt động như mong đợi bằng cách sử dụng hook useState để lưu trữ các giá trị của đầu vào và cập nhật trạng thái của chúng bất cứ khi nào có thay đổi xảy ra trong các trường đầu vào. Chúng ta cũng sẽ đưa hook useCallback từ React vào vì sau này chúng ta sẽ cần nó để giữ một hàm.

Đầu tiên, khi chúng ta vẫn đang ở trong thành phần WelcomeScreen, chúng ta cần nhập useState và useCallback từ React.

import React, { useState, useCallback } from 'react';

Bây giờ bên trong thành phần chức năng WelcomeScreen, hãy tạo hai trạng thái cho email và mật khẩu tương ứng:

...const WelcomeScreen = () => { const [email, setEmail] = useState('') const [password, setPassword] = useState('') return ( ... )}...

Tiếp theo, chúng ta cần sửa đổi các trường của mình để chúng lấy giá trị từ trạng thái tương ứng và cập nhật trạng thái khi giá trị của đầu vào được cập nhật:

import React, { useState, useCallback } from 'react';import { View, Text, Button, StyleSheet, TextInput } from 'react-native';const WelcomeScreen = () => { const [email, setEmail] = useState('') const [password, setPassword] = useState('') const onInputChange = (value, setState) => { setState(value); } return (  ...   onInputChange(value, setEmail)} />  onInputChange(value, setPassword)} /> ...   )}...

Trong đoạn mã trên, đây là những gì chúng tôi đã làm:

• Chúng tôi đã tạo giá trị của từng đầu vào văn bản để trỏ đến trạng thái tương ứng của chúng.
• Chúng tôi đã thêm onChangeText trình xử lý văn bản đầu vào của chúng tôi. Điều này sẽ kích hoạt bất cứ khi nào một giá trị mới được nhập hoặc xóa khỏi các trường nhập.
• Chúng tôi đã gọi hàm onInputChange của mình chấp nhận hai đối số:Giá trị hiện tại được cung cấp bởi trình xử lý onChangeText.
• Bộ thiết lập trạng thái cần được cập nhật (đối với trường nhập đầu tiên, chúng tôi truyền setEmail và trường thứ hai, chúng tôi truyền setPassword.
• Cuối cùng, chúng tôi viết hàm onInputChange và hàm của chúng tôi chỉ thực hiện một việc: Cập nhật các trạng thái tương ứng bằng giá trị mới.

Điều tiếp theo chúng ta cần làm là hàm onUserAuthentication() được gọi bất cứ khi nào nhấp vào nút gửi biểu mẫu.

Trong trường hợp lý tưởng, người dùng phải đã tạo tài khoản và quá trình đăng nhập sẽ liên quan đến một số loại logic phụ trợ để kiểm tra xem người dùng có tồn tại hay không và sau đó chỉ định một mã thông báo cho người dùng. Trong trường hợp của chúng tôi, vì chúng tôi không sử dụng bất kỳ phần phụ trợ nào, chúng tôi sẽ tạo một đối tượng chứa thông tin đăng nhập người dùng chính xác, sau đó chỉ xác thực người dùng khi các giá trị họ nhập khớp với các giá trị cố định của chúng tôi từ đối tượng đăng nhập là email và password mà chúng tôi sẽ tạo.

Đây là mã chúng tôi cần để thực hiện việc này:

...const correctAuthenticationDetails = { email: '[email protected]', password: 'password'}const WelcomeScreen = () => { ... // Hàm này được gọi khi nhấp vào nút `AUTHENTICATE` const onUserAuthentication = () => { if ( email !== correctAuthenticationDetails.email || password !== correctAuthenticationDetails.password ) { alert('Email hoặc mật khẩu không đúng') return } // Tại đây, chúng ta sẽ xử lý những gì xảy ra nếu thông tin đăng nhập là // đúng } ... return ( ... )}...

Một trong những điều đầu tiên bạn sẽ nhận thấy trong đoạn mã trên là chúng ta đã định nghĩa correctAuthenticationDetails (là một đối tượng chứa thông tin đăng nhập chính xác mà chúng ta mong đợi người dùng cung cấp) bên ngoài thành phần chức năng WelcomeScreen().

Tiếp theo, chúng ta đã viết nội dung của hàm onUserAuthentication() và sử dụng một câu lệnh có điều kiện để kiểm tra xem email hoặc password được giữ ở các trạng thái tương ứng có khớp với trạng thái mà chúng ta đã cung cấp trong đối tượng của mình hay không.

Nếu bạn muốn xem những gì chúng ta đã làm cho đến nay, hãy nhập Thành phần WelcomeScreen vào App.js của bạn như thế này:

Mở tệp App.js và thay thế toàn bộ mã bằng mã sau:

import { StatusBar } từ 'expo-status-bar';import React từ 'react';import { View } từ 'react-native';import WelcomeScreen từ './views/screens/preAuthScreens/welcomeScreen';export default function App() { return (     );}

Nhìn kỹ vào đoạn mã trên, bạn sẽ thấy chúng ta đã nhập thành phần WelcomeScreen rồi sử dụng nó trong hàm App().

Đây là kết quả của WelcomeScreen của chúng ta:



Bây giờ chúng ta đã hoàn tất việc xây dựng thành phần WelcomeScreen, hãy tiếp tục và bắt đầu làm việc với Context API để quản lý trạng thái toàn cục của chúng ta.

Tại sao lại là Context API?​

Khi sử dụng Context API, chúng ta không cần phải cài đặt bất kỳ thư viện bổ sung nào vào ReactJS, việc thiết lập sẽ ít căng thẳng hơn và là một trong những cách phổ biến nhất để xử lý trạng thái toàn cục trong ReactJS. Đối với việc quản lý trạng thái nhẹ, đây là một lựa chọn tốt.

Tạo ngữ cảnh của chúng ta​

Nếu bạn nhớ lại, chúng ta đã tạo một thư mục context trước đó và tạo một thư mục con bên trong thư mục đó có tên là authContext.

Bây giờ, hãy điều hướng đến tệp AuthContext.js trong thư mục authContext và tạo ngữ cảnh của chúng ta:

context > authContext > AuthContext.js

import React, { createContext } from 'react';const AuthContext = createContext();export default AuthContext;

AuthContext mà chúng ta vừa tạo giữ giá trị trạng thái loading và các giá trị trạng thái userToken. Hiện tại, trong createContext mà chúng ta đã khai báo trong khối mã ở trên, chúng ta không khởi tạo bất kỳ giá trị mặc định nào ở đây nên ngữ cảnh của chúng ta hiện là undefined. Một giá trị ví dụ của ngữ cảnh xác thực có thể là {loading: false, userToken: 'abcd}

Tệp AuthState.js giữ logic API ngữ cảnh của chúng ta và các giá trị trạng thái của chúng. Các hàm được viết ở đây có thể được gọi từ bất kỳ đâu trong ứng dụng của chúng ta và khi chúng cập nhật các giá trị trong trạng thái, nó cũng được cập nhật trên toàn cầu.

Đầu tiên, hãy đưa tất cả các lệnh nhập mà chúng ta sẽ cần vào tệp này:

context > AuthContext > AuthState.js

nhập React, { useState } từ 'react';nhập AuthContext từ './AuthContext';import AsyncStorage from '@react-native-community/async-storage';

Chúng tôi đã nhập hook useState() từ ReactJS để giữ trạng thái của mình, chúng tôi đã nhập tệp AuthContext mà chúng tôi đã tạo ở trên vì đây là nơi ngữ cảnh trống để xác thực của chúng tôi được khởi tạo và chúng tôi sẽ cần sử dụng nó như bạn sẽ thấy sau này trong khi chúng tôi tiến hành, cuối cùng chúng tôi nhập gói AsyncStorage (tương tự như localStorage cho web).

AsyncStorage là API React Native cho phép bạn lưu trữ dữ liệu ngoại tuyến qua thiết bị trong ứng dụng React Native.

...const AuthState = (props) => { const [userToken, setUserToken] = useState(null); const [isLoading, setIsLoading] = useState(true); const onAuthentication = async() => { const USER_TOKEN = "drix1123q2" await AsyncStorage.setItem('user-token', USER_TOKEN); setUserToken(USER_TOKEN); console.warn("user has been authenticated!") } return (  {props.children}  )}export default AuthState;

Trong khối mã ở trên, đây là những gì chúng tôi đã làm:

• Chúng tôi đã khai báo hai trạng thái cho userToken và isLoading. Trạng thái userToken sẽ được sử dụng để lưu trữ mã thông báo được lưu vào AsyncStorage, trong khi trạng thái isLoading sẽ được sử dụng để theo dõi trạng thái tải (ban đầu được đặt thành true). Chúng ta sẽ tìm hiểu thêm về cách sử dụng hai trạng thái này khi tiến hành.
• Tiếp theo, chúng tôi đã viết hàm onAuthentication(). Hàm này là hàm async được gọi khi nhấp vào nút đăng nhập từ tệp welcomeScreen.jsx. Hàm này sẽ chỉ được gọi nếu email và mật khẩu mà người dùng đã cung cấp khớp với đối tượng chi tiết người dùng chính xác mà chúng tôi đã cung cấp. Thông thường, những gì xảy ra trong quá trình xác thực là một mã thông báo được tạo cho người dùng sau khi người dùng được xác thực ở phần phụ trợ bằng một gói như JWT và mã thông báo này được gửi đến phần giao diện. Vì chúng ta sẽ không đi sâu vào tất cả những điều đó trong hướng dẫn này, chúng ta đã tạo một mã thông báo tĩnh và giữ nó trong một biến có tên là USER_TOKEN.
• Tiếp theo, chúng ta sử dụng từ khóa await để đặt mã thông báo người dùng của chúng ta thành AsyncStorage với tên user-token. Câu lệnh console.warn() chỉ được sử dụng để kiểm tra xem mọi thứ đã ổn chưa, bạn có thể bỏ nó bất cứ khi nào bạn muốn.
• Cuối cùng, chúng ta truyền hàm onAuthenticated của mình dưới dạng một giá trị bên trong để chúng ta có thể truy cập và gọi hàm từ bất kỳ đâu trong ứng dụng của mình.

screens > preAuth > welcomeScreen.js

Đầu tiên, hãy nhập useContext từ ReactJS và nhập AuthContext từ tệp AuthContext.js.

import React, { useState, useContext } from 'react';import AuthContext from '../../../context/authContext/AuthContext'...

Bây giờ, bên trong thành phần chức năng welcomeScreen(), hãy sử dụng ngữ cảnh mà chúng ta đã tạo:

...const WelcomeScreen = () => { const { onAuthentication } = useContext(AuthContext) const onUserAuthentication = () => { if ( email !== correctAuthenticationDetails.email || password !== correctAuthenticationDetails.password ) { alert('Email hoặc mật khẩu không đúng') return } onAuthentication() } return ( ... )}...

Trong khối mã trên, chúng tôi đã hủy cấu trúc hàm onAuthentication khỏi AuthContext của mình và sau đó chúng tôi gọi hàm này bên trong hàm onUserAuthentication() và xóa câu lệnh console.log() đã có trước đó.

Hiện tại, lệnh này sẽ báo lỗi vì chúng tôi chưa có quyền truy cập vào AuthContext. Để sử dụng AuthContext ở bất kỳ đâu trong ứng dụng của bạn, chúng ta cần bao bọc tệp cấp cao nhất trong ứng dụng của mình bằng AuthState (trong trường hợp của chúng ta, đó là tệp App.js).

Đi đến tệp App.js và thay thế mã ở đó bằng mã sau:

import React from 'react';import WelcomeScreen from './views/screens/preAuthScreens/welcomeScreen';import AuthState from './context/authContext/AuthState'export default function App() { return (    );}

Chúng ta đã đi được đến đây và đã hoàn thành phần này. Trước khi chuyển sang phần tiếp theo, nơi chúng ta thiết lập định tuyến, hãy tạo một màn hình mới. Màn hình chúng ta sắp tạo sẽ là tệp HomeScreen.js được cho là chỉ hiển thị sau khi xác thực thành công.

Đi tới: screens > postAuth.

Tạo một tệp mới có tên là HomeScreen.js. Sau đây là mã cho tệp HomeScreen.js:

screens > postAuth > HomeScreen.js

import React from 'react';import { View, Text, Button, StyleSheet } from 'react-native';const HomeScreen = () => { const onLogout = () => { console.warn("Nút đăng xuất đã nhấp") } return (  Bây giờ bạn đã được xác thực! Chào mừng!   )}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', },})export default HomeScreen

Hiện tại, nút đăng xuất có một câu lệnh console.log() giả. Sau đó, chúng ta sẽ tạo chức năng đăng xuất và chuyển nó đến màn hình từ ngữ cảnh của chúng ta.

Thiết lập tuyến đường của chúng ta​

Chúng ta cần tạo ba (3) tệp bên trong thư mục điều hướng của mình:

• postAuthNavigator.js,
• preAuthNavigator.js,
• AppNavigator.js.

Sau khi tạo xong ba tệp này, hãy điều hướng đến tệp preAuthNaviagtor.js mà bạn vừa tạo và viết như sau:

navigation > preAuthNavigator.js

import React from "react";import { createStackNavigator } from "@react-navigation/stack";import WelcomeScreen from "../screens/preAuthScreens/welcomeScreen";const PreAuthNavigator = () => { const { Navigator, Screen } = createStackNavigator(); return (    )}export default PreAuthNavigator;

Trong tệp ở trên, đây là những gì chúng tôi đã làm:

• Chúng tôi đã nhập createStackNavigator từ @react-navigation/stack mà chúng tôi đang sử dụng để điều hướng ngăn xếp. createStackNavigatorCung cấp một cách để ứng dụng của bạn chuyển đổi giữa các màn hình, trong đó mỗi màn hình mới được đặt trên cùng của một ngăn xếp. Theo mặc định, trình điều hướng ngăn xếp được định cấu hình để có giao diện & cảm nhận quen thuộc của iOS và Android: màn hình mới trượt vào từ bên phải trên iOS, mờ dần từ dưới lên trên Android. Nhấp vào đây nếu bạn muốn tìm hiểu thêm về trình duyệt ngăn xếp trong React Native.
• Chúng tôi đã phân tích cấu trúc Navigator và Screen từ createStackNavigator().
• Trong câu lệnh return, chúng tôi đã tạo điều hướng bằng và tạo màn hình bằng . điều này có nghĩa là nếu chúng ta có nhiều màn hình có thể truy cập trước khi xác thực, chúng ta sẽ có nhiều thẻ ở đây để biểu diễn chúng.
• Cuối cùng, chúng ta xuất thành phần PreAuthNavigator của mình.

Chúng ta hãy làm điều tương tự cho tệp postAuthNavigator.js.

navigation > postAuthNavigator.js

import React from "react";import { createStackNavigator } from "@react-navigation/stack";import HomeScreen from "../screens/postAuthScreens/HomeScreen";const PostAuthNavigator = () => { const { Navigator, Screen} = createStackNavigator(); return (    )}export default PostAuthNavigator;

Như chúng ta thấy trong đoạn mã trên, điểm khác biệt duy nhất giữa preAuthNavigator.js và postAuthNavigator.js là màn hình được hiển thị. Trong khi phần đầu tiên sử dụng WelcomeScreen, thì postAuthNavigator.js sử dụng HomeScreen.

Để tạo AppNavigator.js, chúng ta cần tạo một vài thứ.

Vì AppNavigator.js là nơi chúng ta sẽ chuyển đổi và kiểm tra tuyến đường nào sẽ khả dụng để người dùng truy cập, nên chúng ta cần có một số màn hình để hoạt động bình thường. Trước tiên, hãy phác thảo những thứ chúng ta cần tạo:

1. TransitionScreen.js
   Trong khi ứng dụng quyết định sẽ gắn kết điều hướng nào, chúng ta muốn màn hình chuyển tiếp hiển thị. Thông thường, màn hình chuyển tiếp sẽ là một vòng quay tải hoặc bất kỳ hoạt ảnh tùy chỉnh nào khác được chọn cho ứng dụng, nhưng trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng thẻ cơ bản để hiển thị đang tải….
2. checkAuthenticationStatus()
   Đây là hàm chúng tôi sẽ gọi để kiểm tra trạng thái xác thực, từ đó xác định ngăn xếp điều hướng nào sẽ được gắn kết. Chúng tôi sẽ tạo hàm này trong ngữ cảnh của mình và sử dụng nó trong Appnavigator.js.

Bây giờ, hãy tiếp tục và tạo tệp TransitionScreen.js của chúng tôi.

screens > TransitionScreen.js

import React from 'react';import { Text, View } from 'react-native';const TransitionScreen = () => { return (  Đang tải...  )}export default TransitionScreen

Màn hình chuyển tiếp của chúng ta chỉ là một màn hình đơn giản hiển thị văn bản đang tải. Chúng ta sẽ xem nơi sử dụng màn hình này khi chúng ta tiến hành trong bài viết này.

Tiếp theo, chúng ta hãy đến AuthState.js và viết checkAuthenticationStatus() của chúng ta:

context > authContext > AuthState.js

import React, { useState, useEffect } từ 'react';import AuthContext từ './AuthContext';import AsyncStorage từ '@react-native-community/async-storage';const AuthState = (props) => { const [userToken, setUserToken] = useState(null); const [isLoading, setIsLoading] = useState(true); ... useEffect(() => { checkAuthenticationStatus() }, []) const checkAuthenticationStatus = async () => { try { const returnToken = await AsyncStorage.getItem('user-toke n'); setUserToken(returnedToken); console.warn('Mã thông báo người dùng được đặt thành giá trị trạng thái) } catch(err){ console.warn(`Đây là lỗi xảy ra khi truy xuất mã thông báo: ${err}`) } setIsLoading(false) } const onAuthentication = async() => { ... } return (  {props.children}  )}export default AuthState;

Trong khối mã ở trên, chúng tôi đã viết hàm checkAuthenticationStatus(). Trong hàm của chúng tôi, đây là những gì chúng tôi đang làm:

• Chúng tôi đã sử dụng từ khóa await để lấy mã thông báo của mình từ AsyncStorage. Với AsyncStorage, nếu không có mã thông báo nào được cung cấp, nó sẽ trả về null. Trạng thái userToken ban đầu của chúng ta cũng được đặt thành null.
• Chúng ta sử dụng setUserToken để đặt giá trị trả về từ AsyncStorage làm userToken mới của chúng ta. Nếu giá trị trả về là null, điều đó có nghĩa là userToken của chúng ta vẫn là null.
• Sau khối try{}…catch(){}, chúng ta đặt isLoading thành false vì hàm kiểm tra trạng thái xác thực đã hoàn tất. Chúng ta sẽ cần giá trị của isLoading để biết liệu chúng ta có nên tiếp tục hiển thị TransitionScreen hay không. Nên cân nhắc đặt lỗi nếu có lỗi khi truy xuất mã thông báo để chúng ta có thể hiển thị cho người dùng nút "Thử lại" hoặc "Thử lại" khi gặp lỗi.
• Bất cứ khi nào AuthState gắn kết, chúng ta muốn kiểm tra trạng thái xác thực, vì vậy chúng ta sử dụng hook ReactJS useEffect() để thực hiện việc này. Chúng ta gọi hàm checkAuthenticationStatus() bên trong hook useEffect() và đặt giá trị của isLoading thành false khi hoàn tất.
• Cuối cùng, chúng ta thêm trạng thái của mình vào các giá trị để có thể truy cập chúng từ bất kỳ đâu trong ứng dụng được API Context bảo vệ.

Bây giờ chúng ta đã có hàm của mình, đã đến lúc quay lại AppNavigator.js và viết mã để gắn trình điều hướng ngăn xếp cụ thể dựa trên trạng thái xác thực:

navigation > AppNavigator.js

Đầu tiên, chúng ta sẽ nhập tất cả những gì cần thiết cho AppNavigator.js của mình.

import React, { useEffect, useContext } from "react";import PreAuthNavigator from "./preAuthNavigator";import PostAuthNavigator from "./postAuthNavigator";import { NavigationContainer } from "@react-navigation/native"import { createStackNavigator } from "@react-navigation/stack";import AuthContext from "../../context/authContext/AuthContext";import TransitionScreen from "../screens/TransitionScreen";

Bây giờ chúng ta đã có tất cả các mục nhập, hãy tạo hàm AppNavigator().

...const AppNavigator = () => {}export default AppNavigator

Tiếp theo, chúng ta sẽ tiếp tục viết nội dung cho hàm AppNavigator() của mình:

import React, { useState, useEffect, useContext } from "react";import PreAuthNavigator from "./preAuthNavigator";import PostAuthNavigator from "./postAuthNavigator";nhập { NavigationContainer } từ "@react-navigation/native"nhập { createStackNavigator } từ "@react-navigation/stack";nhập AuthContext từ "../../context/authContext/AuthContext";nhập TransitionScreen từ "../screens/transition";const AppNavigator = () => { const { Navigator, Screen } = createStackNavigator(); const authContext = useContext(AuthContext); const { userToken, isLoading } = authContext; if(isLoading) { trả về [TR] } return (   { userToken == null ? (  null }} /> ) : (  null }} /> ) }   )}export default AppNavigator

Trong khối mã trên, đây là phác thảo những gì chúng tôi đã làm:

• Chúng tôi đã tạo một trình điều hướng ngăn xếp và hủy cấu trúc Navigator và Screen từ trình điều hướng đó.
• Chúng tôi đã nhập userToken và isLoading từ AuthContext
• Khi AuthState được gắn kết, checkAuthenticationStatus() được gọi trong hook useEffecct tại đó. Chúng ta sử dụng câu lệnh if để kiểm tra xem isLoading có true không, nếu true thì màn hình trả về là [TR] mà chúng ta đã tạo trước đó vì hàm checkAuthenticationStatus() vẫn chưa hoàn tất.
• Sau khi checkAuthenticationStatus() hoàn tất, isLoading được đặt thành false và chúng ta trả về các thành phần Navigation chính.
• NavigationContainer được nhập từ @react-navigation/native. Nó chỉ được sử dụng một lần trong trình điều hướng cấp cao nhất chính. Lưu ý rằng chúng ta không sử dụng điều này trong preAuthNavigator.js hoặc postAuthNavigator.js.
• Trong AppNavigator(), chúng ta vẫn tạo một trình điều hướng ngăn xếp. Nếu userToken lấy từ Context API của chúng ta là null, chúng ta sẽ gắn kết PreAuthNavigator, nếu giá trị của nó là một giá trị khác (có nghĩa là AsyncStorage.getItem() trong checkAuthenticationStatus() trả về một giá trị thực), thì chúng ta sẽ gắn kết PostAuthNavigator. Kết xuất có điều kiện của chúng tôi được thực hiện bằng cách sử dụng toán tử ba ngôi.

Bây giờ chúng ta đã thiết lập AppNavigator.js của mình. Tiếp theo, chúng ta cần truyền AppNavigator của mình vào tệp App.js.

Hãy truyền AppNavigator của chúng ta vào tệp App.js:

App.js

...import AppNavigator from './views/navigation/AppNavigator';...return (    );

Bây giờ chúng ta hãy xem ứng dụng của chúng ta trông như thế nào tại thời điểm này:

[*]
Sau đây là những gì xảy ra khi bạn cung cấp thông tin xác thực không chính xác khi cố gắng đăng nhập:

Thêm chức năng đăng xuất​

Tại thời điểm này, xác thực của chúng tôi và quá trình chọn tuyến đường đã hoàn tất. Việc duy nhất còn lại cho ứng dụng của chúng ta là thêm chức năng đăng xuất.

Nút đăng xuất nằm trong tệp HomeScreen.js. Chúng ta đã truyền hàm onLogout() cho thuộc tính onPress của nút. Hiện tại, chúng ta có một câu lệnh console.log() đơn giản trong hàm của mình, nhưng sau một thời gian ngắn, điều đó sẽ thay đổi.

Bây giờ, hãy chuyển đến AuthState.js và viết hàm để đăng xuất. Hàm này chỉ xóa AsyncStorage nơi lưu mã thông báo người dùng.

context > authContext > AuthState.js

...const AuthState = (props) => { ... const userSignout = async() => { await AsyncStorage.removeItem('user-token'); setUserToken(null); } return ( ... )}export default AuthState;

userSignout() là một hàm bất đồng bộ xóa user-token khỏi AsyncStorage của chúng ta.

Bây giờ chúng ta cần gọi hàm userSignout() trong HomeScreen.js của chúng ta bất cứ khi nào nút đăng xuất được nhấp vào.

Chúng ta hãy đến HomeScreen.js của chúng ta và sử dụng userSignout() từ AuthContext của chúng ta.

screens > postAuthScreens > HomeScreen.js

import React, { useContext } từ 'react';import { View, Text, Button, StyleSheet } từ 'react-native';import AuthContext từ '../../../context/authContext/AuthContext'const HomeScreen = () => { const { userSignout } = useContext(AuthContext) const onLogout = () => { userSignout() } return (  Bây giờ bạn đã được xác thực! Chào mừng!   )}...

Trong khối mã trên, chúng ta đã nhập hook useContext từ ReactJS, sau đó chúng ta nhập AuthContext của mình. Tiếp theo, chúng ta đã hủy cấu trúc hàm userSignout từ AuthContext của mình và hàm userSignout() này được gọi trong hàm onLogout() của chúng ta.

Bây giờ, bất cứ khi nào nút đăng xuất của chúng ta được nhấp, mã thông báo người dùng trong AsyncStorage của chúng ta sẽ bị xóa.

Voila! toàn bộ quá trình của chúng tôi đã hoàn tất.

Đây là những gì xảy ra khi bạn nhấn nút quay lại sau khi đã đăng nhập:
Nhấn nút quay lại sau khi đăng nhập vào ứng dụng.
Đây là những gì xảy ra khi bạn nhấn nút quay lại sau khi đăng xuất:
Nhấn nút quay lại sau khi đăng xuất khỏi ứng dụng.
Dưới đây là một số hành vi khác nhau mà chúng tôi nhận thấy khi sử dụng mẫu này trong việc chuyển đổi ngăn xếp điều hướng của mình:

1. Bạn sẽ nhận thấy rằng không có nơi nào chúng tôi cần sử dụng navigation.navigate() hoặc navigation.push() để chuyển đến một tuyến đường khác sau khi đăng nhập. Khi trạng thái của chúng tôi được cập nhật bằng mã thông báo người dùng, ngăn xếp điều hướng được hiển thị sẽ tự động thay đổi.
2. Nhấn nút quay lại trên thiết bị của bạn sau khi đăng nhập thành công không thể đưa bạn trở lại trang đăng nhập, thay vào đó, nó sẽ đóng hoàn toàn ứng dụng. Hành vi này rất quan trọng vì bạn không muốn người dùng có thể quay lại trang đăng nhập trừ khi họ đăng xuất khỏi ứng dụng. Điều tương tự cũng áp dụng cho việc đăng xuất — sau khi người dùng đăng xuất, họ không thể sử dụng nút quay lại để trở về màn hình Màn hình chính mà thay vào đó, ứng dụng sẽ đóng lại.

Kết luận​

Trong nhiều Ứng dụng, xác thực là một trong những phần quan trọng nhất vì nó xác nhận rằng người đang cố gắng truy cập vào nội dung được bảo vệ có quyền truy cập thông tin. Học cách thực hiện đúng là một bước quan trọng trong việc xây dựng một ứng dụng tuyệt vời, trực quan và dễ sử dụng/điều hướng.

Dựa trên mã này, đây là một số điều bạn có thể cân nhắc thêm:

• Xác thực biểu mẫu để xác thực các trường nhập liệu. Hãy xem Xác thực biểu mẫu React Native với Formik và Yup.
• Xác thực Firebase để tích hợp xác thực với Gmail, Github, Facebook, Twitter hoặc giao diện tùy chỉnh của bạn. Hãy xem React Native Firebase.
• Các khái niệm về mã dành cho nhà thiết kế: Xác thực và Ủy quyền.

Dưới đây là một số tài nguyên quan trọng mà tôi tìm thấy sẽ giúp bạn hiểu rõ hơn về xác thực, bảo mật và cách thực hiện đúng:

Tài nguyên​

• React Native: Giải thích về luồng xác thực người dùng
• 10 phương pháp hay nhất về bảo mật của React
• Phương pháp xác thực có thể ngăn chặn vi phạm tiếp theo
• Xem bản dựng/bản xem trước trực tiếp ứng dụng của chúng tôi tại đây;
• Xem dự án trên GitHub.

Đọc thêm​

• Regexes Got Good: Lịch sử và tương lai của biểu thức chính quy trong JavaScript
• Tạo số ngẫu nhiên duy nhất trong JavaScript bằng cách sử dụng Bộ
• Cách an toàn nhất để ẩn khóa API của bạn khi sử dụng React
• Thư viện lập lịch chuyên nghiệp tốt nhất