Expo+React Native实现鉴权

一、引入相关依赖

npm i @reduxjs/toolkit  react-redux expo-secure-store axios

依赖	作用
@reduxjs/toolkit	简化 Redux 开发的官方工具包，提供标准化的 Redux 最佳实践
react-redux	连接 React 组件和 Redux Store 的官方绑定库
expo-secure-store	安全的、异步的键值存储系统
axios	网络请求

二、实现流程

1、通过axios获取token
2、通过redux记录登录标志和token，同时将数据保存到本地存储中
3、定义一个组件AuthInitializer，用于初始化时从本地缓存中更新redux数据

三、各种文件配置

@/utils/auth.js

import * as SecureStore from 'expo-secure-store';/*** 保存认证信息到本地存储*/
export const saveAuthInfo = async (isLogin, token = '') => {try {await SecureStore.setItemAsync('auth', JSON.stringify({isLogin,token}));} catch (error) {console.error('Error saving auth info:', error);}
};/*** 从本地存储获取认证信息*/
export const getAuthInfo = async () => {try {const storedAuth = await SecureStore.getItemAsync('auth');if (storedAuth) {return JSON.parse(storedAuth);}} catch (error) {console.error('Error getting auth info:', error);}return null;
};/*** 清除本地认证信息*/
export const clearAuthInfo = async () => {try {await SecureStore.deleteItemAsync('auth');} catch (error) {console.error('Error clearing auth info:', error);}
};

@/store/slices/authSlice.js

import {createSlice} from '@reduxjs/toolkit'
import {saveAuthInfo, clearAuthInfo} from '@/utils/auth';const authSlice = createSlice({name: 'auth',initialState: {isLogin: false,token: '',},reducers: {login(state, {payload: {isLogin, token = ''}}) {state.isLogin = isLogin;state.token = token;},logout(state) {state.isLogin = false;state.token = '';}}
})// 创建中间件来处理本地存储
export const authMiddleware = (store) => (next) => async (action) => {const result = next(action);const state = store.getState();try {if (state.auth.isLogin) {// 登录时将状态以及token保存到本地存储中await saveAuthInfo(state.auth);} else {// 登出时清除本地存储await clearAuthInfo();}} catch (error) {console.error('Error saving auth state to secure store:', error);}return result;
};export const {login, logout} = authSlice.actions;
export default authSlice.reducer;

@/store/index.js

import {configureStore} from '@reduxjs/toolkit'
import authSlice, {authMiddleware} from '@/store/slices/authSlice'const store = configureStore({reducer: {auth: authSlice},middleware: (getDefaultMiddleware) =>getDefaultMiddleware().concat(authMiddleware)
})export default store

src/app/(auth)/_layout.js

const { isLogin } = useSelector((state) => state.auth);// 认证完成后重定向到首页
if (isLogin) {return <Redirect href='/(auth)/(tabs)'/>
}

@/components/AuthInitializer

import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import {getAuthInfo} from "@/utils/auth";
import { login,logout } from '@/store/slices/authSlice';
import { View } from 'react-native';const AuthInitializer = ({ children }) => {const dispatch = useDispatch();const [isLoading, setIsLoading] = useState(true);useEffect(() => {const initializeAuth = async () => {try {const storedAuth = await getAuthInfo('auth');if (storedAuth) {dispatch(login(storedAuth));} else {// 没有存储的认证信息，标记为已检查dispatch(logout());}} catch (error) {console.error('Error initializing auth state:', error);dispatch(logout());} finally {setIsLoading(false);}};initializeAuth();}, [dispatch]);if (isLoading) {// 在认证状态加载完成前显示加载指示器return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}/>}return children;
};export default AuthInitializer;

src/app/_layout.js

import {Slot} from 'expo-router';
import '@/global.css'
import {Provider} from 'react-redux';
import store from "@/store";
import AuthInitializer from "@/components/AuthInitializer";export default function Layout() {return <Provider store={store}><AuthInitializer><Slot/></AuthInitializer></Provider>
}