用户登录

用户在登录页面登录并授权以后,会把用户带回到我的档案这个页面 .. 这样我们可以去更新一个这个页面的显示 .. 这里我们需要用到一个 React 的生命周期里的一个方法 ... componentWillUpdate ..

打开 UserProfile.js .. 在这里添加一个方法 .. 名字是 componentWillUpdate .. 组件要更新的时候就会执行这个方法 .. 我们可以先判断一下 .. 组件的 token 状态是不是有值 .. 如果没有的话 .. 就试着去得到 AsyncStorage 里的 token 的值 ...

完成以后用一个 then 去处理一下 .. 里面用一个箭头函数 .. 给它一个参数名字是 token ,获取到的内容会在这个参数里面 .. 然后设置一下组件的状态 .. 设置的是 token 这个状态 .. 它的值使用 JSON 的 parse 方法处理一下 token .. 然后得到这个 token 对象里的 access_token 属性的值 .. 它就是我们需要的 token ..

设置了 token 状态以后 .. 再用一个 then .. 判断一下组件的 token 状态 .. 如果有值 .. 就去执行一下 getCurrentUser() ... 再找到这个方法 .. 在里面用一个 console.log .. 输出几个文字 .. 获取当前登录用户的资料 ..

保存 .. 因为我们在前一个视频里已经获取到了访问令牌 .. 并且把它放到了 AsyncStorage 里面 .. 所以这里会显示一个 获取当前登录用户的资料 ..

回到这个 UserProfile.js .. 找到组件的 constructor 方法 .. 在这里可以先去请求一下 AsnycStorage .. 使用它的 clear 这个方法 .. 保存 ... 再保存一下 ... 再删除掉这行代码 .. 然后保存 ...

这样在访问我的档案页面的时候,会把用户重定向到登录的页面 ... 输入用户名 .. 密码 .. 验证码 ... 然后授权 .. 成功以后用户会被带回到我的档案这个页面 .. 这样会执行 componentWillUpdate 方法 .. 得到 AsyncStorage 里的 token .. 把它里面的访问令牌交给组件的 token 状态 .. 然后又去执行 getCurrentUser 去得到当前登录的用户相关的资料 .. 在控制台上,你会看到一个 获取当前登录用户的资料 这几个字儿 ..

更新我的档案页面《 React Native #6:oAuth 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点