轉(zhuǎn)載于 何洲的個人博客
幾乎所有的應(yīng)用都需要進行身份驗證，今天我就來介紹一下如何通過 React Navigation 實現(xiàn)這一流程盟步。我將會使用 Express 構(gòu)建一個簡單的服務(wù)器使 Demo 看起來更加真實，驗證的過程基于 Token 實現(xiàn)纠屋。
Demo 的源碼請在 Github 上查看：https://github.com/hezhii/react-native-auth-example
概述
我們的 APP 將會是這樣子……
當(dāng)用戶第一次打開 APP 時將會進入到登錄頁面掸冤，在此頁面輸入正確的用戶名和密碼并點擊登錄后，將會進入到主頁浆洗。此時，除非用戶退出登錄集峦，否則無法回到登錄頁面伏社。
登錄頁面還提供了一個“新用戶注冊”按鈕，點擊此按鈕會進入到注冊頁面塔淤，用戶可以在此頁面注冊成為新用戶摘昌。
主頁由兩個標簽頁組成，用戶可以在“我的”頁面通過點擊“退出登錄”按鈕注銷登錄高蜂。注銷登錄后聪黎，除非用戶再次登錄，否則無法再回到主頁备恤。
如果用戶以前登錄過稿饰，那么當(dāng)用戶打開 APP 后，將會直接進入到主頁露泊。
界面及路由
考慮 APP 的概述喉镰，我們會用到 4 個界面，分別是：注冊惭笑、登錄侣姆、主頁、我的脖咐，其中“主頁”和“我的”是兩個標簽頁铺敌，它們組成了 APP 的主界面。因此屁擅，我們需要用到兩個導(dǎo)航器：TabNavigator 和 StackNavigator，其中 StackNavigator 用來完成注冊产弹、登錄和 APP 主界面的跳轉(zhuǎn)派歌，而 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;
接著痰哨，我們在應(yīng)用入口點（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;
各個界面及后臺服務(wù)的代碼這里就不貼出來了胶果，請查看相應(yīng)源碼：https://github.com/hezhii/react-native-auth-example/tree/step1
這一步主要完成的工作如下：
- 后臺服務(wù)及各界面的 UI。
- 簡單的封裝了 fetch API斤斧。
- 點擊注冊按鈕時早抠，使用
navigation.navigate('Register')跳轉(zhuǎn)到注冊界面。 - 登錄請求成功后撬讽，利用
NavigationActions.reset()和navigation.dispatch(resetAction)跳轉(zhuǎn)到 APP 主界面并 Reset 路由蕊连。 - 點擊登出按鈕時悬垃，同樣 Reset 路由并跳轉(zhuǎn)到登錄頁面。
這一步實現(xiàn)的效果就和上圖中一樣甘苍，完成了用戶注冊尝蠕、登錄、登出這一流程载庭。
記住登錄狀態(tài)
完成第一步之后看彼，我們實現(xiàn)了 APP 概述中提到了第 1、第 2 和第 3 個功能點囚聚。接下來靖榕，我們需要實現(xiàn)第 4 個功能點，也就是實現(xiàn)一個記住登錄狀態(tài)的功能顽铸。
在 APP 中通常使用 Token 機制來完成身份驗證序矩，這里參考 OAuth2.0 來實現(xiàn)這樣的一個機制：
當(dāng)用戶登錄成功后，服務(wù)器會返回這樣的 JSON 數(shù)據(jù)：
{
access_token: 'xxxx',
refresh_token: 'xxxx',
expires_in: 7200 // 有效時長為 2 小時
}
其中 access_token 用來鑒定用戶身份跋破，請求需要權(quán)限的接口時需要帶上該信息簸淀；expires_in 表示 access_token 的有效時長，單位為秒毒返；因為 access_token 的有效時長只有 2 小時租幕，為了避免用戶需要再次登錄，當(dāng) access_token 過期后拧簸，可以調(diào)用后臺接口刷新 token劲绪，該接口需要驗證 refresh_token，驗證通過后盆赤，服務(wù)器會返回一組新的 token贾富。
當(dāng)用戶登錄成功后，APP 需要緩存下用戶的 token 信息牺六，在請求敏感信息時颤枪，帶上 access_token，而當(dāng) access_token 過期時淑际，則利用 refresh_token 刷新 token畏纲。同時，當(dāng)用戶打開 APP 后春缕，讀取 refresh_token 并刷新 token盗胀，如果這一操作成功，那么就可以認為用戶已經(jīng)登錄锄贼，直接進入到 APP 主界面票灰，否則則進入到登錄界面。當(dāng)用戶登出時，我們則需要清除本地和服務(wù)器上的緩存屑迂。
這里涉及到兩個關(guān)鍵點：一是如何緩存和讀取 token浸策，二是如何根據(jù)刷新 token 的結(jié)果跳轉(zhuǎn)到指定界面。
緩存和讀取 token 推薦使用 react-native-storage,它提供了豐富的 API 幫助我們實現(xiàn)緩存機制屈糊。
初始頁面的跳轉(zhuǎn)可以通過 initialRouteName 指定的榛，如果刷新 token 成功，則設(shè)置為 'Main',否則設(shè)置為 'Login'逻锐。
這一部分的源碼：https://github.com/hezhii/react-native-auth-example/tree/step2
實現(xiàn)的效果如下圖所示夫晌。
從圖中可以看到，當(dāng)?shù)卿洺晒竺劣眨匦录虞d時會進入到主界面而不是登錄界面晓淀，而登出后，則會進入到登錄界面盏档。
總結(jié)
以上就是基于 React Navigation 和 Token 緩存機制實現(xiàn)的身份驗證流程凶掰，主要涉及到的是 react-navigation 和 react-native-storage 這兩個庫的使用和 Token 鑒權(quán)機制。這只是一種實現(xiàn)思路蜈亩，更完美的方案我也還在摸索中懦窘，期待下次相遇。
