1
00:00:02,110 --> 00:00:07,300
Portanto, para garantir que estamos desconectados quando o token expirar, adicionarei uma nova função em nossa

2
00:00:07,300 --> 00:00:08,150
ação de

3
00:00:08,160 --> 00:00:13,270
autenticação, na pasta de ações na autenticação. js, adicionarei aqui uma nova função na

4
00:00:13,270 --> 00:00:20,950
qual desejo definir um timer que basicamente expire quando o token expirar. Portanto, podemos chamar esse timer de logout definido, por

5
00:00:21,220 --> 00:00:21,840
exemplo,

6
00:00:21,880 --> 00:00:31,410
e lá, espero obter o tempo de expiração. Aqui, podemos usar o bom e antigo timeout definido pelo React Native em sua versão Javascript

7
00:00:31,410 --> 00:00:38,630
para definir um timer que expire após esse período e digamos que esse é um valor em milissegundos,

8
00:00:38,630 --> 00:00:43,280
portanto, é apenas uma suposição que tenho e temos que garantir que

9
00:00:43,280 --> 00:00:47,530
passamos os dados em milissegundos. Posteriormente, essa função aqui

10
00:00:47,540 --> 00:00:55,480
será executada assim que o token expirar, e a pergunta é agora o que fazemos lá?

11
00:00:56,060 --> 00:00:57,890
Bem, no final, eu quero enviar o

12
00:00:57,900 --> 00:00:58,980
logout aqui, certo?

13
00:00:58,980 --> 00:01:05,490
Portanto, definir o cronômetro de logout provavelmente não deve ser uma função normal, mas na verdade aqui,

14
00:01:06,120 --> 00:01:10,370
terei uma função que tira proveito do Redux Thunk; portanto, onde temos

15
00:01:10,590 --> 00:01:16,680
essa função em uma função em que essa função interna é despachada como argumento e, portanto,

16
00:01:17,400 --> 00:01:20,010
uma vez que isso tarefa assíncrona concluída.

17
00:01:20,010 --> 00:01:27,660
Depois que o cronômetro expirar, podemos despachar o logout, para que possamos despachar o resultado desse criador da ação, que é

18
00:01:27,660 --> 00:01:29,510
essa ação no final,

19
00:01:29,670 --> 00:01:32,890
para que isso aconteça quando o cronômetro terminar.

20
00:01:32,910 --> 00:01:38,670
Agora, quando fizermos logout, também quero limpar todos os cronômetros em execução, porque talvez tenhamos que

21
00:01:38,670 --> 00:01:45,760
definir o temporizador automaticamente aqui, o que não estamos definindo ainda, mas em breve o faremos, então quero limpar esse

22
00:01:45,760 --> 00:01:49,110
cronômetro quando efetuarmos o logout manualmente para que Eu não

23
00:01:49,120 --> 00:01:55,670
tenho esse cronômetro em andamento, mesmo sendo redundante. Então, podemos adicionar uma nova variável, talvez na

24
00:01:55,670 --> 00:02:02,340
parte superior do arquivo, aqui denominada timer, que não foi inicializada inicialmente e, aqui, quando definirmos um

25
00:02:02,340 --> 00:02:08,760
timer, definiremos o resultado do tempo limite definido como temporizador ou armazenará o resultado disso. no timer,

26
00:02:08,850 --> 00:02:12,860
que é um ponteiro nesse timer e adicionar uma nova

27
00:02:12,860 --> 00:02:21,920
função, talvez aqui, limpar o timer de logout, que agora é uma função normal, não uma função que obtém essa função interna de despacho,

28
00:02:21,950 --> 00:02:29,510
mas uma função normal onde eu simplesmente chamo de clear timeout timer e o timer é aquela variável que aponta

29
00:02:29,510 --> 00:02:30,800
para o timer.

30
00:02:30,800 --> 00:02:36,080
Eu só quero verificar se o timer existe, se não é indefinido e se não

31
00:02:36,080 --> 00:02:41,620
for indefinido, chamarei isso, clear timeout é uma função embutida no Javascript para se livrar desse timer.

32
00:02:41,840 --> 00:02:43,290
Assim, com isso,

33
00:02:43,290 --> 00:02:47,770
podemos limpar o cronômetro se não precisarmos mais dele e eu quero me

34
00:02:47,810 --> 00:02:56,540
livrar dele sempre que fizermos logout; portanto, sempre que isso acontecer aqui, chamarei de cronômetro de logout claro e mais uma coisa que preciso

35
00:02:56,540 --> 00:03:00,650
fazer quando Logout é necessário limpar meu armazenamento assíncrono, é claro.

36
00:03:00,650 --> 00:03:09,760
Portanto, aqui, posso chamar o armazenamento assíncrono para remover os dados do usuário do item, novamente usando o mesmo identificador usado para armazenar os

37
00:03:09,760 --> 00:03:10,470
dados.

38
00:03:10,540 --> 00:03:12,550
Então, eu usei os dados do usuário

39
00:03:12,550 --> 00:03:18,010
lá em baixo, preciso usar o mesmo identificador para limpá-los. Agora, remova o item retorna uma

40
00:03:18,010 --> 00:03:18,680
promessa

41
00:03:18,730 --> 00:03:25,080
e poderíamos esperar por isso; nesse caso, precisaríamos retornar a sintaxe interna onde obtemos o

42
00:03:25,090 --> 00:03:31,600
despacho e realizamos nossa tarefa assíncrona; portanto, movemos esse código aqui para esse e então

43
00:03:31,670 --> 00:03:33,380
podemos despachar esse açao.

44
00:03:33,380 --> 00:03:36,500
Poderíamos fazer tudo isso se estivermos interessados no resultado

45
00:03:36,500 --> 00:03:41,970
da remoção do item, mas aqui não estou interessado, acionarei isso e não esperarei que essa

46
00:03:42,140 --> 00:03:48,560
promessa seja concluída. Em vez disso, retornarei imediatamente esse novo objeto de ação e eu acredito que isso será concluído.

47
00:03:48,590 --> 00:03:51,440
Agora é claro que você pode reestruturar isso, mas é assim

48
00:03:51,440 --> 00:03:57,380
que eu o farei, isso deve remover os dados do nosso armazenamento local. Portanto, com isso, o logout faz isso, temos a

49
00:03:57,380 --> 00:04:03,450
função de timer de logout, que define um timer que efetua logout uma vez expirado. Agora, apenas precisamos garantir

50
00:04:03,450 --> 00:04:07,920
que despachem esse criador de ação do timer de logout definido aqui, que usamos

51
00:04:07,920 --> 00:04:15,510
esse criador de ação e Eu quero usar isso quando nos autenticarmos. Portanto, temos essa ação

52
00:04:15,510 --> 00:04:22,630
de autenticação aqui e ali, no final, preciso despachar o cronômetro

53
00:04:22,800 --> 00:04:30,770
de logoff definido e isso aqui. Então, agora, vou agora usar essa sintaxe diferente,

54
00:04:30,770 --> 00:04:37,280
na qual obtemos essa função interna que recebe despacho, para que aqui eu possa despachar o

55
00:04:37,760 --> 00:04:42,940
timer de logout definido para que isso seja acionado e, é claro, isso

56
00:04:45,740 --> 00:04:51,590
também significa que aqui, em vez de retornar isso, também precisamos despachar isso, por

57
00:04:51,590 --> 00:04:59,970
isso despachamos duas ações aqui, o que é absolutamente bom. Então, defino meu cronômetro e despacho a

58
00:05:00,390 --> 00:05:02,270
ação de autenticação.

59
00:05:02,290 --> 00:05:08,890
Agora, é claro, o cronômetro de logout precisa saber quanto tempo deve demorar, o tempo de expiração é

60
00:05:08,890 --> 00:05:17,110
necessário e eu espero obter isso, esse tempo de expiração apenas para misturar nomes, como um argumento aqui na autenticação para que eu

61
00:05:17,110 --> 00:05:20,920
possa encaminhar isso aqui ao meu cronômetro de logout.

62
00:05:20,920 --> 00:05:27,400
Isso significa que todo lugar em que despacharmos a ação de autenticação ou onde usamos esse criador de ação, devo

63
00:05:27,400 --> 00:05:33,100
dizer, todo lugar em que fizermos isso não precisará apenas fornecer o userId e o token, mas também

64
00:05:33,280 --> 00:05:35,230
o tempo de expiração e que

65
00:05:35,470 --> 00:05:38,580
começa aqui com inscrever-se. Quando nos inscrevemos,

66
00:05:38,590 --> 00:05:46,800
temos nossa data de validade aqui e enviamos a autenticação. Agora a autenticação também precisa do tempo de

67
00:05:46,800 --> 00:05:47,670
expiração.

68
00:05:47,670 --> 00:05:52,440
Agora, o bom é que aqui é muito fácil descobrir quando isso

69
00:05:52,440 --> 00:05:58,730
expira, porque os temos nos dados de resposta, temos esse campo expirado no campo, que é,

70
00:05:58,830 --> 00:06:07,970
obviamente, uma string, portanto, com parseInt, podemos converter isso em um número e isso será em segundos, autentique e defina os valores esperados do

71
00:06:07,970 --> 00:06:11,480
cronômetro de logout em milissegundos, então multiplicarei isso

72
00:06:11,690 --> 00:06:19,540
por 1000 e também o adicionarei no logon, é claro. Lá, acrescentarei também que, como terceiro argumento

73
00:06:19,580 --> 00:06:23,890
aqui, para que, para o login quando

74
00:06:24,110 --> 00:06:31,490
despacharmos essa ação de autenticação, também repassemos nosso tempo de expiração que estamos

75
00:06:31,490 --> 00:06:36,520
recebendo do Firebase. Agora, também temos um outro lugar onde

76
00:06:36,530 --> 00:06:38,660
precisamos fazer isso, que é a

77
00:06:38,660 --> 00:06:45,740
tela de inicialização, porque lá também despachamos a autenticação e aqui precisamos calcular o tempo restante, porque isso entra em ação

78
00:06:45,950 --> 00:06:47,410
sempre que reiniciarmos

79
00:06:47,420 --> 00:06:51,080
o aplicativo, então aqui não sabemos quanto tempo levará para o

80
00:06:51,080 --> 00:06:53,100
token expirar e precisamos calcular isso.

81
00:06:53,150 --> 00:07:02,060
Então, aqui eu posso calcular o tempo de expiração basicamente pegando a data de expiração, que é um objeto de data, e chamando get time, o que

82
00:07:02,060 --> 00:07:08,090
me dá seu carimbo de data / hora em milissegundos desde o início dos tempos e daí eu

83
00:07:08,090 --> 00:07:09,070
tenho que

84
00:07:09,800 --> 00:07:14,940
deduzir o tempo de obtenção do carimbo de data atual, portanto, o registro de data

85
00:07:15,020 --> 00:07:18,820
e hora atual em milissegundos. Isso será no futuro, agora

86
00:07:18,830 --> 00:07:19,850
é, portanto,

87
00:07:19,850 --> 00:07:24,810
a diferença deve ser um número positivo, porque eu estou verificando se é o futuro

88
00:07:24,830 --> 00:07:28,280
aqui, então esse deve ser um número positivo em milissegundos.

89
00:07:28,310 --> 00:07:35,060
Portanto, agora o tempo de expiração aqui pode ser encaminhado para autenticação e, com isso, devemos ter o logout

90
00:07:35,330 --> 00:07:36,110
automático também.

91
00:07:37,790 --> 00:07:39,450
Agora, para validar

92
00:07:39,470 --> 00:07:46,440
que isso funciona, vamos para o auth. arquivo js e, na verdade, lá, na função de ajuste do

93
00:07:46,560 --> 00:07:53,350
cronômetro de logout, dividirei temporariamente o tempo de expiração por 1000, o que significa que dividirei os milissegundos por 1000, que os

94
00:07:53,370 --> 00:07:54,960
transforma em segundos e

95
00:07:54,960 --> 00:07:57,320
isso significa que devemos sair instantaneamente agora.

96
00:07:59,410 --> 00:08:06,940
Se eu recarregar, estou desconectado, mas em breve você perceberá que existem apenas teoricamente obras. Se eu fizer login novamente, estou

97
00:08:06,940 --> 00:08:12,830
logado e agora que dividi o valor por 1000, devo

98
00:08:12,830 --> 00:08:21,370
sair depois das 3. 6 segundos, mas não estou. Posso navegar, mas se

99
00:08:22,390 --> 00:08:30,720
eu recarregar, na verdade agora estou desconectado. Então, isso meio que limpou os dados, mas não nos levou de volta à tela

100
00:08:30,720 --> 00:08:31,530
de autenticação,

101
00:08:31,920 --> 00:08:37,710
e a razão disso é que nunca instruímos o React Native a nos levar de volta à tela de autenticação, então

102
00:08:37,740 --> 00:08:39,250
essa é a peça que falta.

103
00:08:39,270 --> 00:08:45,300
Limpar nossa loja Redux é bom, mas em reação a essa liberação, precisamos garantir que

104
00:08:45,300 --> 00:08:52,090
somos levados de volta à tela de autenticação. Para garantir que isso aconteça, precisamos de um lugar que seja sempre renderizado,

105
00:08:52,090 --> 00:08:59,230
que envolva todo o nosso aplicativo, onde possamos ouvir nossa loja Redux e descobrir quando nosso token for redefinido para nulo, para que, se isso acontecer, possamos

106
00:08:59,230 --> 00:09:06,480
navegar de volta para o tela de autenticação. Agora esse seria o aplicativo. arquivo js porque isso envolve tudo,

107
00:09:06,490 --> 00:09:08,100
mas o problema

108
00:09:08,110 --> 00:09:14,080
está aí, eu configurei o Redux aqui. Portanto, o Redux em minha loja está disponível apenas

109
00:09:14,080 --> 00:09:19,960
aqui, em componentes filho aninhados e esse já é meu componente de navegador ao qual não tenho

110
00:09:19,960 --> 00:09:21,000
acesso direto.

111
00:09:21,100 --> 00:09:28,700
A solução é simplesmente envolvê-lo com outro componente. Vou criar isso na pasta de

112
00:09:29,090 --> 00:09:33,120
navegação porque o nomeei contêiner de navegação.

113
00:09:33,140 --> 00:09:37,690
Agora, este é um componente React normal, como este, onde

114
00:09:38,820 --> 00:09:46,650
eu não preciso de nada do React Native, mas onde acabei de configurar meu componente de contêiner de navegação onde

115
00:09:46,650 --> 00:09:52,980
recebo adereços e retorno jsx no final e o exporto como um contêiner de navegação padrão.

116
00:09:54,380 --> 00:10:02,810
Agora, lá dentro, quero configurar minha navegação, então importarei o navegador de loja do navegador de loja que está na

117
00:10:02,810 --> 00:10:06,230
mesma pasta e será isso que retornarei aqui,

118
00:10:06,410 --> 00:10:15,110
meu navegador de loja como este. Agora eu posso usar meu contêiner de navegação aqui no aplicativo. arquivo js, então, em vez de

119
00:10:15,110 --> 00:10:24,190
importar o navegador da loja aqui, importo meu contêiner de navegação da pasta de navegação e do arquivo do contêiner de

120
00:10:24,230 --> 00:10:29,980
navegação e uso o contêiner de navegação aqui em vez do navegador da loja.

121
00:10:29,990 --> 00:10:34,670
Agora, isso é simplesmente um invólucro em torno do navegador da loja, mas como ele está dentro do provedor,

122
00:10:34,670 --> 00:10:36,410
agora tenho acesso ao Redux lá.

123
00:10:36,440 --> 00:10:46,150
Portanto, aqui, podemos importar o seletor de uso do React Redux e usá-lo aqui para acessar o Redux.

124
00:10:46,190 --> 00:10:54,320
Portanto, aqui no contêiner de navegação, eu posso simplesmente acessar o isAuth, digamos, usando o seletor de uso que aceita essa função que me dá acesso ao estado Redux e,

125
00:10:55,010 --> 00:11:00,410
então, eu posso acessar o estado. auth. token para obter acesso

126
00:11:00,410 --> 00:11:06,980
ao token na minha fatia de estado de autenticação e usar o operador double bang para forçar basicamente que isso

127
00:11:06,980 --> 00:11:12,620
seja verdadeiro ou falso e, se não tivermos token, isso será falso, então isAuth será falso nesse

128
00:11:12,620 --> 00:11:15,460
caso, se tivermos um token será verdadeiro, então

129
00:11:15,500 --> 00:11:23,780
isAuth será verdadeiro se tivermos um token que faça sentido, eu acho. Agora podemos usar o efeito aqui para reagir a

130
00:11:23,780 --> 00:11:25,060
mudanças nisso.

131
00:11:25,160 --> 00:11:29,480
Portanto, aqui em efeito de uso, minha matriz de dependência inclui isAuth,

132
00:11:29,480 --> 00:11:37,270
portanto, quando isAuth muda, essa função de efeito deve ser executada e, portanto, aqui, posso verificar se não estamos autenticados porque é

133
00:11:37,270 --> 00:11:39,630
isso que me interessa, se isAuth

134
00:11:39,670 --> 00:11:45,910
não é verdadeiro , se for verdade, não me importo, mas se não for verdade, desejo navegar para

135
00:11:45,910 --> 00:11:49,220
a tela de autenticação e agora temos outro problema.

136
00:11:49,390 --> 00:11:55,930
O navegador está aqui e somente nos componentes que são renderizados com a ajuda do navegador,

137
00:11:55,930 --> 00:12:03,220
temos acesso aos acessórios. navegação. Navegue, mas felizmente, o React Navigation nos dá uma saída. Podemos usar um

138
00:12:03,220 --> 00:12:08,770
ref para obter acesso à funcionalidade de navegação com a ajuda

139
00:12:08,770 --> 00:12:17,550
deste componente quando o usamos em nosso código jsx. Podemos criar essa ref com use ref com o gancho use ref

140
00:12:17,610 --> 00:12:20,610
e simplesmente criamos nossa nav ref aqui chamando use

141
00:12:21,270 --> 00:12:27,070
ref como esta e você deve estar ciente das referências no React, que é basicamente uma maneira

142
00:12:27,070 --> 00:12:34,890
de acessar diretamente um elemento que você render em jsx e agora podemos adicionar a propriedade ref ao navegador da loja e atribuí-la

143
00:12:34,910 --> 00:12:37,450
a nav ref ou o contrário.

144
00:12:37,470 --> 00:12:43,020
Portanto, isso estabelece uma conexão entre a constante nav ref e esse elemento que no final é renderizado aqui

145
00:12:43,020 --> 00:12:49,610
e agora com isso aqui no efeito, podemos chamar navRef. atual, é assim que os árbitros

146
00:12:49,630 --> 00:12:50,830
funcionam,

147
00:12:50,830 --> 00:12:59,660
eles têm um despacho de propriedade atual. Despacho é um método disponibilizado pelo navegador da loja ou por este contêiner de aplicativo, no final, porque

148
00:12:59,660 --> 00:13:05,420
o contêiner da loja nada mais é do que o ShopNavigator. js exporta, que é um componente de contêiner

149
00:13:05,420 --> 00:13:11,010
de aplicativo e esse componente tem um método de despacho que podemos usar para despachar

150
00:13:11,010 --> 00:13:15,110
uma ação de navegação. Para isso, agora

151
00:13:15,110 --> 00:13:24,650
precisamos importar algo da navegação React e que algo é o objeto de ações de navegação aqui

152
00:13:24,650 --> 00:13:29,720
e aqui, chamamos NavigationActions. navegar e agora

153
00:13:29,900 --> 00:13:36,620
isso nos permite navegar. No entanto, não com auth como esse, mas isso requer

154
00:13:36,620 --> 00:13:41,950
um objeto como argumento, onde você configura o nome da rota e agora pode ser auth.

155
00:13:41,960 --> 00:13:47,270
É assim que agora podemos navegar de dentro desse componente, mesmo que esteja fora do navegador.

156
00:13:49,080 --> 00:13:56,610
Portanto, isso vai para auth sempre que nosso estado isAuth muda para não autenticado, isso também significa que, no navegador

157
00:13:56,610 --> 00:14:03,320
da loja, em nosso botão de logout, não precisamos navegar aqui porque, se acionarmos o logout, se

158
00:14:03,340 --> 00:14:08,670
despacharmos essa ação , limpamos o token no Redux e, portanto, isso deve

159
00:14:08,670 --> 00:14:12,390
acionar automaticamente nossa navegação graças a esse contêiner de

160
00:14:12,660 --> 00:14:18,140
navegação. Portanto, se salvarmos isso, devemos navegar para autenticação quando o token for inválido.

161
00:14:18,140 --> 00:14:25,530
Então agora, se eu entrar novamente, depois das 3. Em 6 segundos, devemos sair e ver que

162
00:14:25,530 --> 00:14:26,800
estamos desconectados,

163
00:14:26,850 --> 00:14:28,690
sim, isso parece bom.

164
00:14:28,890 --> 00:14:30,780
Vamos tentar novamente

165
00:14:36,990 --> 00:14:45,490
aqui, sim, voltando e também tentar fazer logout manual.

166
00:14:45,530 --> 00:14:47,340
Então, se eu for logar, abra isso, clique em sair, isso também funciona.

167
00:14:47,410 --> 00:14:50,900
Então, com isso, incorporamos a funcionalidade de logoff

168
00:14:50,950 --> 00:14:57,580
automático, agora vamos voltar ao arquivo de ação auth e remover essa divisão fictícia aqui porque eu

169
00:14:57,580 --> 00:15:02,020
fiz isso apenas para testes, é claro que não quero reduzir manualmente

170
00:15:02,020 --> 00:15:08,980
meu tempo de expiração , agora aqui temos uma funcionalidade que funciona e que garante que não importa

171
00:15:09,160 --> 00:15:16,210
se estamos nos inscrevendo ou fazendo login ou o que estamos fazendo, temos um token que armazenamos, que podemos

172
00:15:16,210 --> 00:15:21,660
usar e está certificando-se de que também estamos desconectados automaticamente se nosso token expirar.

173
00:15:21,700 --> 00:15:24,010
Esta é a aplicação finalizada aqui.