React Navigation 身份验证流程

最新推荐文章于 2024-08-14 14:42:27 发布

hezh1994

最新推荐文章于 2024-08-14 14:42:27 发布

阅读量1.1k

点赞数

分类专栏：博客文章标签： react-native react-navigation authentication

博客专栏收录该内容

9 篇文章 6 订阅

订阅专栏

转载于何洲的个人博客

几乎所有的应用都需要进行身份验证，今天我就来介绍一下如何通过 React Navigation 实现这一流程。我将会使用 Express 构建一个简单的服务器使 Demo 看起来更加真实，验证的过程基于 Token 实现。

Demo 的源码请在 Github 上查看：https://github.com/hezhii/react-native-auth-example

概述

我们的 APP 将会是这样子……

当用户第一次打开 APP 时将会进入到登录页面，在此页面输入正确的用户名和密码并点击登录后，将会进入到主页。此时，除非用户退出登录，否则无法回到登录页面。
登录页面还提供了一个“新用户注册”按钮，点击此按钮会进入到注册页面，用户可以在此页面注册成为新用户。
主页由两个标签页组成，用户可以在“我的”页面通过点击“退出登录”按钮注销登录。注销登录后，除非用户再次登录，否则无法再回到主页。
如果用户以前登录过，那么当用户打开 APP 后，将会直接进入到主页。

界面及路由

考虑 APP 的概述，我们会用到 4 个界面，分别是：注册、登录、主页、我的，其中“主页”和“我的”是两个标签页，它们组成了 APP 的主界面。因此，我们需要用到两个导航器：TabNavigator 和 StackNavigator，其中 StackNavigator 用来完成注册、登录和 APP 主界面的跳转，而 TabNavigator 则完成主页和我的页面的切换。

路由器的配置如下：

const Main = TabNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      headerTitle: '主页'
    }
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      headerTitle: '我的'
    }
  }
}, {
  tabBarOptions: {
    labelStyle: {
      fontSize: 16
    }
  }
});

const AppNavigator = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      headerTitle: '登录'
    }
  },
  Main: {
    screen: Main
  },
  Register: {
    screen: Register,
    navigationOptions: {
      headerTitle: '注册'
    }
  }
});

export default AppNavigator;

接着，我们在应用入口点（App.js）使用 AppNavigator：

import React, { Component } from 'react';
import {
  StyleSheet,
  View
} from 'react-native';

import AppNavigator from './AppNavigator';

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <AppNavigator />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

export default App;

各个界面及后台服务的代码这里就不贴出来了，请查看相应源码：https://github.com/hezhii/react-native-auth-example/tree/step1

这一步主要完成的工作如下：

后台服务及各界面的 UI。
简单的封装了 fetch API。
点击注册按钮时，使用 navigation.navigate('Register') 跳转到注册界面。
登录请求成功后，利用 NavigationActions.reset() 和 navigation.dispatch(resetAction) 跳转到 APP 主界面并 Reset 路由。
点击登出按钮时，同样 Reset 路由并跳转到登录页面。

这一步实现的效果就和上图中一样，完成了用户注册、登录、登出这一流程。

记住登录状态

完成第一步之后，我们实现了 APP 概述中提到了第 1、第 2 和第 3 个功能点。接下来，我们需要实现第 4 个功能点，也就是实现一个记住登录状态的功能。

在 APP 中通常使用 Token 机制来完成身份验证，这里参考 OAuth2.0 来实现这样的一个机制：

当用户登录成功后，服务器会返回这样的 JSON 数据：

{
  access_token: 'xxxx',
  refresh_token: 'xxxx',
  expires_in: 7200 // 有效时长为 2 小时
}

其中 access_token 用来鉴定用户身份，请求需要权限的接口时需要带上该信息；expires_in 表示 access_token 的有效时长，单位为秒；因为 access_token 的有效时长只有 2 小时，为了避免用户需要再次登录，当 access_token 过期后，可以调用后台接口刷新 token，该接口需要验证 refresh_token，验证通过后，服务器会返回一组新的 token。

当用户登录成功后，APP 需要缓存下用户的 token 信息，在请求敏感信息时，带上 access_token，而当 access_token 过期时，则利用 refresh_token 刷新 token。同时，当用户打开 APP 后，读取 refresh_token 并刷新 token，如果这一操作成功，那么就可以认为用户已经登录，直接进入到 APP 主界面，否则则进入到登录界面。当用户登出时，我们则需要清除本地和服务器上的缓存。

这里涉及到两个关键点：一是如何缓存和读取 token，二是如何根据刷新 token 的结果跳转到指定界面。

缓存和读取 token 推荐使用 react-native-storage,它提供了丰富的 API 帮助我们实现缓存机制。

初始页面的跳转可以通过 initialRouteName 指定，如果刷新 token 成功，则设置为 'Main',否则设置为 'Login'。

这一部分的源码：https://github.com/hezhii/react-native-auth-example/tree/step2

实现的效果如下图所示。