22. 尚硅谷_Mpvue_获取用户登录信息，授权弹窗

好，我们继续啊，这节课呢，我们去做什么功能呢？去做一下这个点击登录，弹出授权弹窗，在用户授权允许的情况下，哎，获取用户的输入信息，然后展现在这一块，好，那首先我们点击这个button，要弹出一个授权弹窗的话，哎，普通的button肯定是搞不定的，那来我们来到官方文档这儿，还是来到组键啊来到组件，我们先把右侧的这些都关了，它在组建这一块呢，咱们去找到这个button，那button之前我们用它去做过一个特殊的事情是什么？哎，对分享怎么去做的分享呢？当初呢，有一个open time对应的设置什么值啊叫share。对吧，好，那现在呢，要做分享啊，要做这个数学弹窗呢，还是得用它open t，我们还是往下来找啊，往下来找open type，呃下我们用过了，还有一个叫get your INF。

使用它呢，是可以弹出那个数学窗口的来，这个时候我们可以去验证一下啊，嗯，在这个button，这在这儿来一个open，哎，Type对应的值叫get your info，好，我们只需要设置上这个，回头再点击这个button，大家看啊，现在没有反应呢，是因为我之前我这个写写好的项目，咱是不是授权过了，授权过了它是会做一个缓存叫授权数据缓存，而授权的动作只需要一次。所以呢，你再点是不会出来的，呃，为什么只需要一次呢？大家可以想一下，我们平时用小程序的时候啊，其实呃上来一般下载完上来打开它就让我们授权，而且呢，你会发现比较恶心的是什么，你不授权的情况下，很多的小程序你压根不能用，所以呢，用户被逼无奈，是不是点击一个授权，哎，授权了以后意味着他可以获取你的信息对吧？呃呃，拿到信息展示也好，或者有他其他的用处也好，是不是都可以啊。

OK，那呃，你想你授权了以后，你下一次再进这个小程序还需要授权吗？哎，是不需要的啊不需要的，那这样的话是很麻烦的，所以呢，鉴于这种情况呢，啊，因为这两个工具它的缓存是共用的，所以呢，在这儿我们可以去干嘛去清除一下这个缓存，然后呢，再去刷新一下，哎，重新编译一下，这个时候我们点击登录走，哎大家看这是不是出现了对应的授权弹窗呀。没问题吧，好，那这儿的内容，至于说这儿为什么有上回谷的logo，以及这个硅谷图书呢？啊，我先简单的给大家说一下啊，在我们注册完小程序的账号进来以后，这儿有一个设置，那这个设置这儿这不是基本的内容吗？我们在这儿都是可以去填的啊，都是可以去填的，知道了这个以后呢，来到我们的项目，那点击拒绝也好，允许也好，我们是不是得知道用户点击的是哪个，哎，这个呢，在我们原生的小程序里面其实也讲过，这当我们设置上这个get u INF for以后呢，对应的有一个事件就叫get in for，它是一个回调，哎，这个回调是监测用户点击的动作的。好，现在呢，我们去绑定一下这个世界at它，然后呢，来一个handler啊，Get user。

Inform，好，那这个对应的事件的回调呢，我们还得在GS里面去定一下啊，Method，然后在这个对象，这怎么知道用户点击是拒绝和允许呢？我们可以通过这个参数来判断一下，来先给他做一个简单的输出上来，点击登录，来先点个拒绝是不是打印对象，我再去点一个允许是不是又一个对象，那这两个对比着我们来看一下啊，首先第一步一定是找到map了。

啊，因为小程序的事件对象是不是被分装到map里边，这个呢，也给大家把map打开啊，呃，因为之前我们讲过这我就不卖关子了，你我们需要去找什么呢？找map下边的什么detail，这个detail大家看，拒绝的detail只有一个error message，而我们允许的detail里边。有什么我给大家展开啊，最起码这个u iner是我们想要的，因为它就是一个对象，而上面还有个肉data，这很明显是个阶森对象，而如果说我们拿它的话，是不是还需要转换一下，所以我们只需要判断一下，如果说detail里面有UR info，说明用户是不是点击的是。什么呀，哎，点击的是。

允许并且呢，我们能拿到数据，那这个时候呢，来到我们的项目再去写一下啊E，如果说这个res点哎map.detail点点什么呀，这时候我们想要的数据啊，其实这样判断的话，我们只需要呃写这么多就够了啊，如果说他没出。啊，那说明什么？说明这里面的数据是不是就是我们想要的。来做一个输出啊，其实不做输出也行啊，我们直接把这个数据更新到哪呢？更新到当前组建的啊，Data选项中这来个return一个对象，那我们初始化一个u in应该是公对象，紧接着呢，在这应该写一个z.user音符，是不是等于这一对？好，写完这些以后，来我们再重跑一遍啊，那现在点是不管用了，因为授权过了，你既可以清除授权数据，也可以全部清除都行啊，清除完了以后别忘了重新编译一下，来点击允许，那确认数据有没有更新成功呢？我们还得来到APP data里面点开它找找看1INFO是不是有了，说明我们的数据更新进来了，那其实数据都有了，页面的内容就不难了，那这儿的话这个图片。

你说我们还要吗？诶，可能有同学说不要了，我都拿到用户的头像了，还要它干嘛？哎，这儿你还得留着，因为上来的时候我们是不应该给人家显示头像的啊，不应该给人家显示头像的，因为上来你是没有用户数据的，那这个时候呢，我们得去判断一下，对吧？如果说哎u infer的什么头像呢？我在这儿直接就写了叫ATA啊，URL为true。我们是不是应该去显示这个UR INF for点啊ATAURL，那如果说we response呢，你是不是还得用默认的这张普遍啊，哎，这个时候呢，不要忘了src这去给它，哎加一个强制解析，那这个登录这呢也是一样的道理，它也不能写死，好在这儿的话来user，呃，我们也去判断一下啊user iner点这有个叫尼。

啊，待会带大家看一下，叫尼克啊，Name叫昵称，如果是为，那我们还是用这一堆。对吧，哎，那就用用户的名字了嘛，For的话，那就是还是用什么用我们之前这个登录文字，那那这一版呢，我们来看一下对不对啊呃，刷新一下。状态清了走。点击拒绝没有反应，点击允许，哎，这是不是显示出来了，哎，这个时候呢，头像这呢，我们应该是给人家整成圆的啊，要不然太丑了，那最起码我们的功能是不是写完了，好，那这个时候呢，来到个人中心找到我们头像的图片这儿这儿呢应该给人家加一个啊border reduce这儿呢，应该是50RPX是不是就没问题了？好呃，来，我写完了以后，大家看一下啊，这边是不是自动编译了，那在编译完了以后，数据又重新初始化，所以呢，我们看到的是不是原来的初始化状态，那这个时候呢，你再点击登录啊，就不对劲了啊，它这个是编译有缓存，我点的快，大家看啊呃，我再去编译一下，上来，这是不是没有数据，我看一点登录。

哎，数学弹窗是不是没有了，数学弹窗没有了，而且呢，这莫名其妙的就给我显示这个数据啊，这是它编译工具的问题，编译工具的问题，那这个时候呢，是不应该有这个数据的，你想数据弹窗没有，如果说你直接给用户显示了这个数据，那不就有麻烦吗。

正常的逻辑是什么？我全部清除编译。来重新开始点登录允许显示状态，那我再刷新的时候就不应该再出现默认的状态，就应该显示用户的信息才对，对吧，但是呢，又没有人上来去做这个事情，那就是说在我们授权完以后，再次编译的时候，获取用户的登录信息，然后去更新他的状态。哎，这个时候可能也同样回想起来了，我们在授权以后呢，可以使用一个API，哎，这个API叫什么呢？来，呃，我们去找一下开放接口里面，其中有一个叫。Get your info，那这个呢，是用来获取用户信息的，注意它调用且需要用户授权。

啊，那这不正好是我们想要的API吗？我们上来通过button弹出授权窗口授权，那紧接着再编译的时候，让他去帮我们获用，获取用户的数据是不是就可以，那这个方法我们找到了，大家再准备一个事情，这个方法什么时候用？哎，我们授权以后再次编译上来，是不是就想显示用户的信息啊。所以呢，应该是越早越好，那这个时候呢，我们会选择，哎，你比如说在呃mount在这儿用也没问题啊，来把这个拎过来，这需要传一个对象参数对吧，那我们看一下里面都需要哪些参数啊，这是什么，是否带上登录信息，Long显示语言啊这些呢。

大家看都不是什么必填项，那就是看你们自己的实际需求，那这个呢，我们需要success，因为啥呢？我们得在成功的回调，是不是要拿它对应的信息呀，好，这个时候来来到这儿，我去设置个success，然后对应的写一个接头函数，那不用问了，这一定有个res，往下走，C res我们看一眼。嗯，大家看是不是能拿到的对象，那这个对象呢，U2IN for就是我们要的数据对吧？好，这个时候res.U2IN让它再编译一次啊，这不就是我们要的数据吗？那其实拿到了这个数据以后呢，我们只需要把这个数据干嘛，是不是去更新一下状态啊，在这呢，我们叫更新user iner，嗯，状态数据就OK。好，在这来数据，呃，this.user等于什么？等于这一对就OK。

哎，那这个时候来再让它编译一个页面，大家看上来是不是就能正常显示了，哎，没问题，我们重新跑一遍啊，全部清除编译。你看上来，当我们使用那个微信的get your iner的时候，这是不给我们一个提示啊，哎，这个提示呢，只会在开发工具里边有啊，就是我们真正部署到线上，它是不会出现他让用户看到的，他就告诉你这个不再出现授权弹窗，哎，请注意升级，那这个升级呢，其实就是我后续使用的这个button，哎，把它的open type设置为get your info就OK了，来点击一下拒绝，没有反应再点允许。是不是对了，然后用户再次进来小程序的时候，就应该是能看到自己的信息才对。

好，那在这儿呢，我还需要声明一个事情啊，我们刚刚这是用了success啊，那有成功呢，一定有对应的feel，失败的回调在这儿呢，我给大家打印一下啊，获取失败来，呃，我们看一下这个失败能不能进来啊，重跑一遍，全部清除，然后去编译一下。好，那在第一次加载这个小程序的时候啊，大家要注意，微信点get u info是会走失败的回调，为什么这个时候用户根本没有授权，而这个API呢，说的很清楚，调用前是不是需要用户授权，所以呢，上来他会走失败的回调，这个也是我们应该清楚的。嗯，到现在为止呢，我们就成功的去获取了用户的登录信息啊，并且展示出来啊，并且展示出来，好，那我们这节课呢，先讲到这里。