React Navigation 身份验证流程

编辑于2018年07月30日

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

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

概述

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

  1. 当用户第一次打开 APP 时将会进入到登录页面,在此页面输入正确的用户名和密码并点击登录后,将会进入到主页。此时,除非用户退出登录,否则无法回到登录页面。

  2. 登录页面还提供了一个“新用户注册”按钮,点击此按钮会进入到注册页面,用户可以在此页面注册成为新用户。

  3. 主页由两个标签页组成,用户可以在“我的”页面通过点击“退出登录”按钮注销登录。注销登录后,除非用户再次登录,否则无法再回到主页。

  4. 如果用户以前登录过,那么当用户打开 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

实现的效果如下图所示。

从图中可以看到,当登录成功后,重新加载时会进入到主界面而不是登录界面,而登出后,则会进入到登录界面。

总结

以上就是基于 React Navigation 和 Token 缓存机制实现的身份验证流程,主要涉及到的是 react-navigation 和 react-native-storage 这两个库的使用和 Token 鉴权机制。这只是一种实现思路,更完美的方案我也还在摸索中,期待下次相遇。