10. 身份验证您的操作

在本节中，您将预订航班 🚀！预订航班需要向服务器进行身份验证，以确保正确的发送到太空的人！为此，由于 Apollo Kotlin 用来 OkHttp来处理 HTTP 请求，您将使用 OkHttp 拦截器向您的 GraphQL 请求添加头部。

添加拦截器

在Apollo.kt中添加 AuthorizationInterceptor类：

app/src/main/kotlin/com/example/rocketreserver/Apollo.kt

1
private class AuthorizationInterceptor() : Interceptor {
2
  override fun intercept(chain: Interceptor.Chain): Response {
3
    val request = chain.request().newBuilder()
4
        .apply {
5
          TokenRepository.getToken()?.let { token ->
6
            addHeader("Authorization", token)
7
          }
8
        }
9
        .build()
10
    return chain.proceed(request)
11
  }
12
}

此拦截器若 token 不为 null 则将 "Authorization: $token" HTTP 头部添加到请求中。

使用拦截器

创建一个自定义的 OkHttpClient，使用此拦截器并将其传递给 ApolloClient：

app/src/main/kotlin/com/example/rocketreserver/Apollo.kt

1
val apolloClient = ApolloClient.Builder()
2
    .serverUrl("https://apollo-fullstack-tutorial.herokuapp.com/graphql")
3
    .okHttpClient( 
4
        OkHttpClient.Builder() 
5
            .addInterceptor(AuthorizationInterceptor()) 
6
            .build() 
7
    ) 
8
    .build()

添加 BookTrip 和 CancelTrip 模式

在 schema.graphqls 文件旁边添加一个 BookTrip.graphql 文件：

app/src/main/graphql/BookTrip.graphql

1
mutation BookTrip($id:ID!) {
2
  bookTrips(launchIds: [$id]) {
3
    success
4
    message
5
  }
6
}

注意 bookTrips 字段接收一个列表作为参数，但 mutation 自己只接收单个变量。

另外，添加一个 CancelTrip.graphql 文件。这个 mutation 没有使用列表：

app/src/main/graphql/CancelTrip.graphql

1
mutation CancelTrip($id:ID!) {
2
  cancelTrip(launchId: $id) {
3
    success
4
    message
5
  }
6
}

将mutations与UI连接

回到 LaunchDetails.kt，并将 TODO 替换为执行适当的 mutation，根据 launch 是否已预订：

app/src/main/java/com/example/rocketreserver/LaunchDetails.kt

1
private suspend fun onBookButtonClick(launchId: String, isBooked: Boolean, navigateToLogin: () -> Unit): Boolean {
2
    if (TokenRepository.getToken() == null) {
3
        navigateToLogin()
4
        return false
5
    }
6
    val mutation = if (isBooked) {
7
        CancelTripMutation(id = launchId)
8
    } else {
9
        BookTripMutation(id = launchId)
10
    }
11
    val response = try {
12
        apolloClient.mutation(mutation).execute()
13
    } catch (e: ApolloException) {
14
        Log.w("LaunchDetails", "Failed to book/cancel trip", e)
15
        return false
16
    }
17

18
    if (response.hasErrors()) {
19
        Log.w("LaunchDetails", "Failed to book/cancel trip: ${response.errors?.get(0)?.message}")
20
        return false
21
    }
22
    return true
23
}

现在回到 LaunchDetails 函数，声明一个协程作用域以便调用 onBookButtonClick。让我们记住 isBooked 并相应地更改按钮的文本：

app/src/main/java/com/example/rocketreserver/LaunchDetails.kt

1
// Book button
2
val scope = rememberCoroutineScope() 
3
var isBooked by remember { mutableStateOf(data.launch?.isBooked == true) } 
4
Button(
5
    modifier = Modifier
6
        .padding(top = 32.dp)
7
        .fillMaxWidth(),
8
    onClick = {
9
        scope.launch {
10
            val ok = onBookButtonClick( 
11
                launchId = data.launch?.id ?: "", 
12
                isBooked = isBooked, 
13
                navigateToLogin = navigateToLogin 
14
            ) 
15
            if (ok) { 
16
                isBooked = !isBooked 
17
            } 
18
        }
19
    }
20
) {
21
    Text(text = if (!isBooked) "Book now" else "Cancel booking") 
22
}

还要添加一个加载指示器，并在 mutation 执行时防止按钮被点击：

app/src/main/java/com/example/rocketreserver/LaunchDetails.kt

1
// Book button
2
var loading by remember { mutableStateOf(false) } 
3
val scope = rememberCoroutineScope()
4
var isBooked by remember { mutableStateOf(data.launch?.isBooked == true) }
5
Button(
6
    modifier = Modifier
7
        .padding(top = 32.dp)
8
        .fillMaxWidth(),
9
    enabled = !loading, 
10
    onClick = {
11
        loading = true 
12
        scope.launch {
13
            val ok = onBookButtonClick(
14
                launchId = data.launch?.id ?: "",
15
                isBooked = isBooked,
16
                navigateToLogin = navigateToLogin
17
            )
18
            if (ok) {
19
                isBooked = !isBooked
20
            }
21
            loading = false 
22
        }
23
    }
24
) {
25
    if (loading) { 
26
        SmallLoading() 
27
    } else { 
28
        Text(text = if (!isBooked) "Book now" else "Cancel booking")
29
    } 
30
}

预订您的旅行！

编译并运行您的应用程序。您现在可以预订和取消您的旅行！按钮将根据旅行是否已预订而改变。

在下一节中，您将编写您的第一个订阅并在有人预订航班时实时通知。

9. 编写您的第一个mutation

11. 编写您的第一个订阅