转载于 何洲的个人博客
几乎所有的应用都需要进行身份验证，今天我就来介绍一下如何通过 React Navigation 实现这一流程。我将会使用 Express 构建一个简单的服务器使 Demo 看起来更加真实，验证的过程基于 Token 实现。
Demo 的源码请在 Github 上查看：https://github.com/hezhii/react-native-auth-example
概述
我们的 APP 将会是这样子……
-
当用户第一次打开 APP 时将会进入到登录页面，在此页面输入正确的用户名和密码并点击登录后，将会进入到主页。此时，除非用户退出登录，否则无法回到登录页面。
-
登录页面还提供了一个“新用户注册”按钮，点击此按钮会进入到注册页面，用户可以在此页面注册成为新用户。
-
主页由两个标签页组成，用户可以在“我的”页面通过点击“退出登录”按钮注销登录。注销登录后，除非用户再次登录，否则无法再回到主页。
-
如果用户以前登录过，那么当用户打开 APP 后，将会直接进入到主页。
rn_auth_demo.gif
界面及路由
考虑 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
实现的效果如下图所示。
rn_auth_demo1.gif
从图中可以看到，当登录成功后，重新加载时会进入到主界面而不是登录界面，而登出后，则会进入到登录界面。
总结
以上就是基于 React Navigation 和 Token 缓存机制实现的身份验证流程，主要涉及到的是 react-navigation 和 react-native-storage 这两个库的使用和 Token 鉴权机制。这只是一种实现思路，更完美的方案我也还在摸索中，期待下次相遇。
网友评论