day12/下午/240-尚硅谷-尚融宝-顶部用户信息展示

好，接下来我们要做的事情呢，就是在这个位置展示用户信息，那么这块展示用户信息呢，刚才我说了，每一次你展示之前呀，都要先去我们的这个啊后端啊，去先拿着cookie当中啊的这个token啊，去上后端发起请求，然后对这个啊。Token里面的这个内容呢，进行校验，如果合法了的话，我们再展示出来，如果不合法的话，那我们就不展示是吧，是这样的一个情况啊，那所以呢啊，首先第一件事情我们先做什么呢？就是因为我们登录之后。这样啊，137668166392346号。啊，这个是我得把它改回来啊，改成一。好，因为我们登录之后呢，我们的这个用户信息呢，首先存在了cookie当中，所以呢，我们先做这样的一件事情，就是先呢在库当中先把这个用户信息取出来，然后呢，先展示在这个位置，对吧？啊，那如果cookie过期了，或者是cookie不存在了，那么这个地方就直接不展示了，再有呢，就是如果这个cookie里面有token的话，那么我们还是还是后期会拿着token去做校验，然后呢，整个的一个具体的流程是什么样的呢？我们一步一步来写啊好，我们来看详细的流程。

啊，所以呢，我们先来到这个页面当中，那现在既然要处理这个页头，我们就要知道页头在哪，那根据之前我们学的内容呢，就是我们所有的这个页头呢，它肯定啊都是，嗯，你看其他页面的公共部分，所以它一定可以在我们的布局文件当中找到啊，所以呢，我们找到这个布局文件就是。Layout好，在layouts当中呢，我们找到default.view在default.view当中呢，它有APP hide和APP food的两个组件被引进来了，那这两个组件来源于哪呢？来源于这名引入的两个模块，好，那这两个模块来源于哪呢？来源于components这个目录下的APP和APP附的，那么我们要这个处理的呢，是APP hier啊这个组件，那所以呢，我们找到component这个目录下的APP hier，好，在APP hier里面呢，我们就找到了我们的用户登录啊这样的一个HTML文档啊，这个HTML模板这部分的内容，那么这块呢，就是我们的登录按钮啊，这块呢就是我们的注册按钮，所以对应的呢，就是我们的这块注册和登录这样的两个按钮，好，然后呢，这两个按钮什么时候显示呢？大家看上面有一个叫做。

如果user info不存在的话，那么我们就展示注册和登录对不对，反之如果user info存在的话，那么我们就展示这个用户的账户信息啊，并且展示用户的这个啊，给用户展示一个退出按钮，所以你会发现模板部分的内容呢，其实都给大家实现好了，我们要做的呢，就是完善一下后面这一部分。

完善一下后面这部分，完善一下后面这部分呢，我们来看，在这边呢，我们先定义了一个user info，那默认情况下user ino肯定是none了啊，那什么情况下user ino有值呢？我们先来查找一下cook。就是先看一下库位当中有没有。好，然后接下来怎么去判断cookie呢？首先第一个步骤也是在这个地方先引入cookie模块。啊，然后接下来呢，这个位置我们Co啊，然后点get，嗯，User in for啊，然后接下来呢，这面我们写let user in for，好，这样的话呢，我们就从cookie当中拿到了user in for，也就是这个值，我们来看一下空写在F10啊，啊，就这个值啊，User in for，然后接下来呢，拿到这个user in for之后呢，啊，我们对这个user in for呢，先进行一个判断，If，如果user in for不存在的话。

就是没有这个cookie啊，那么我们先我先自己调试一下啊，叫做cookie不存在，好，然后接下来呢，我们呢，就直接return就好了啊，就直接return，然后接下来，那如果user in for存在的话，我们做什么呢？注意这个u INF for啊从库语当中拿出来呀，它是一个字符串啊，它是一个字符串，我们要对这个字符串类型的这个Jason数据啊进行一个解析，它怎么解析呢？啊，Jason这是Java斯script的原生的一个啊，这个处理方案解析方案就pass啊Jason下面有一个叫pass成一个方法，我们直接呢去对这个UC音O进行解析啊，它直接呢就会把会当中的这个Jason字符串呢转换成一个对象，那我们现在呢，这个user in for就变成了对象，当然如果它俩一样的话，那这let就不用写了啊，那我就让我这个user in for呢用字。

符串变成对象的了，好，那这块呢，是对UC for的一个解析，然后接下来呢，很显然我呢要对这个UC in for呢进行一个赋值，也就是说这面我一旦拿到了这个user INF for的话，那么我需要呢，把这个新的user INF for啊，赋值给前面的这个user INF for，当然了，未来假设说我这个cookie不存在了，我再一次刷新页面的时候，或者是cookie校验失败了等等等等啊，我来过来的时候，那么这个cookie一看不存在了，那么是不是在这个地方直接就return了呢？是的，但是呢，我们还要做一个步骤，就是在清空this.user info，一定要把这个user in for呢给它清掉，否则的话，这个user in for里面会有残余的之前的已经失效的cook数据，对不对，因为是在这之前在这个地方复制的嘛，然后你下次再刷新页面，会议不存在了，就跑这来了嘛，跑这来了，如果你不写这行代码，那么这个里面不就有残余的之前存储的会议数据嘛，所以在这个地方一定不要忘了。

啊，把这个优色音符啊，再给它还原成那值啊，这样的话呢，就是这种没有登录的状态，然后这种呢，就是已经登录的状态。好，那这是展示用户信息，那这个写完了之后呢，我们要在对market里面呢，进行一个调用啊，进行一个调用，那么这个地方呢，我说一下为什么要写market，因为如果写pretty的话，咱们这个呢，是服务器端执行，服务器端执行的话呢，我们这个啊就是啊。这个方法他也会在我们的就是浏览器啊对象，嗯，初始化之前它就会执行，那如果它执行是在浏览器对象的初始化之前就执行了，就说明它这里面根本就拿不到cookie，明白吧，所以这个东西你要写在create里面的这个cookie呢，就会不存在啊，所以呢，我们就写在market里面，Market呢是浏览器对象已经拿到了。

好，那已经什么叫浏览器对象拿到了，因为cookie是浏览器下面的一个成员，所以说如果浏览器没有的话，你cookie也没有，浏览器有了才能有，所以这个地方呢，写在market里面，而不是写在里面啊好，那这块呢是我们的。一个呃，前端的一个初步的实现，所以呢，接下来呢，我们来看一下这面呢，我们刷新一下哈，你看这面呢，它就会展示我们的当前的用户的一个账号信息了，那为什么呢？因为这面你只要给优色音附上值了，我们再往上看页面端，页面端呢，嗯，在这个位置用户已登录的状态下，如果UC for有值的状态下，那我们在这块呢，就显示我账户。

明白吧，所以这个呢，就整个是一个前端的一个整合，所以呢，大家在这个位置着着重了解的就是这块的一个业务逻辑就可以了，那具体整合这部分呢，因为已经给大家写好了，所以大家要能看得懂就可以了啊好，那所以这块呢是我们。初步的一个啊，用户登录的一个整合，然后接下来呢，我们在退出，退出呢我们也是需要去执行一下的，那退出呢，现在其实呢，就是让他跳做一个这个跳转，比如说就直接跳转到登录页，那这样的话其实还不够哈。在这块啊，我们给退出。叫window.location然后点H，然后呢直接跳转到登录页。好，然后接下来呢，我们点这个退出，好，你会发现它跳转到登陆页了，但是虽然它跳转到登陆页了，大家看是不是这块的这个用户信息还在啊，说明什么？说明我们是不是得在前端把token销毁才行啊，你前端token不销毁它，你不论在哪一页，它都上它cook当中去把token取出来，然后解析出来啊，就是那个cook，他他都会去上cookie当中去把用户信息取出来，然后显示在这个位置，对吧？所以呢，我们在这块呢，就先需要哎，注意销毁啊，ok.set。

Who可以点，然后接下来呢啊，就是user in for直接清空就可以了。好，因为cookie没有销毁的功能，你要么就清空它，要么就让它过期啊，它没有说删除cookie没有啊，好，那就清空它，然后接下来呢，我们再刷新一下，刷新一下之后呢，比如说我们先进到首页面吧，先进到用户页吧，到用户页好，然后在用户页呢，我们点击退出。

好，这回呢大家看，因为cookie呢已经清掉了，所以这面的退出功能呢，我们也已经初步的去给他整合进去了啊，所以说这个是登录完成的啊，我们展示用户信息的第一个步骤啊。