vue用户退出功能怎么实现

好，这节课呢，来做一下退出登录，那当然这样呢，是有我的课程订单中心之类这样一些内容的，这个呢，咱们后面再做哈，先把这个退出登录给他搞定了，好了，那这样呢，我也写好定的笔记了，那我把它放到我们这哈，然后这呢是有一个链接啊，供大家参考。 那首先呢，我们需要去找到对应的这个退出登录这块的一个内容，然后并且呢要给他加一个事件，对吧？我们先找一下这个 hundred 哈， 在我们的公共里边有一个 hundred， 然后找一下这个退出登录，好，然后在这儿呢，我们给他加一个事件，那我们就叫他，呃， out loging。 好，那往下走，这是我们的退出登录，退出登录，那么退出登录这呢具体我们要做什么事呢？来看一下啊。首先点击退出登录，应该是有一个提示框，提示我们要确定还是取消，对吧？这是 animate ui 要做内容啊，所以说呢，我们第一步啊，先要把这儿的一个啊提示信息给它拿到，这是 animate ui 的啊，我们给它放到这，当点击它的时候，那这时候呢，我们就需要给它进行一系列的提示，我们把这块拿过来啊，这样内容我就先不要了啊，先把它去除，那我们这呢来试一试啊， 来回到这，当我点击退出登录，哎，有一个提示，对吧？那取消，就是一取消就会走到这个地方啊，然后呢，如果说我们点确定就会走到这来， 点下确定啊，就会走到退出登录这个 s sex， 这， ok， 那么我们退出登录具体要做什么事呢？首先我们肯定要请用接口，这是第一， 然后其次呢就是我们还要把 topi 呢给他做清除，对吧？然后其次呢就是我们还要做的事情呢啊，就是把这个页面呢给他进行一个刷新。好，所以我们要经历的步骤，来吧，咱们看一下啊。呃，那我们就先把那 接口呢给他搞了啊，这有个退出登录，那接口文档我就不给大家去看了哈，大家呢可以自行去找啊。到这呢我就直接加一个，这是一个退出登录， ok， 然后这呢有一个方法，我们把这方法呢在这个地方进行一个引入，好，那就把它拿过来，然后到这 两顿，然后呢它有一个判断的扣的码，呃，如果说 i e s 的 meta 的扣的如果等于了二百，那么这时候呢就代表你点击了这个， 呃，确确定已经是登录了，对吧？好，那这时候呢我们的消息框再弹出来，并且呢这个时候呢我们需要去刷新一个页面啊，那到这呢我们就需要把那个地方的一个 roucher 给他引进来啊，这是我们的 roucher 路由 啊，当然我们其实呢已经引过了这样一个插件了，所以说呢可以直接给他拿进来。呃， light， 我们这呢写一个 rooter， 等于 use rooter。 好，然后到这呢我可以直接的刷新退出登录提示，然后这样呢我来刷新一下页面啊，这是刷新页面。 好，然后呢再其次呢就是我们还要把 talking 给它去除了，对不对？好，那到这呢我们就先来试试吧，点击一下退出登录，点一下确定好 退出登录提示刷新页面， ok， 没有问题，那这样呢还显示一个登录状态，原因就是我们这是通过 topic 呢来获取的， topic 呢，已经存到我们的呃本金存储里边了，所以说呢，我们现在要回到这个拼价中啊，然后这样呢，我们要写一个方法，就是设置 topic， 然后这样呢，来一个清除 topic， 我们叫它 cleaner hockey 版啊，然后把 hockey 呢给它设置为一个空就可以了。好，然后其次呢，我们到这呢要去用一下啊，清除， ok， 好，那这时候呢，我们需要把这个模块引进来哈，就是我们的 pina 那模块 store import。 然后这个地方呢，我们可以用圈 a 了啊， drive store 下的 user， ok， 往下走，那在我们的下边这儿我们就可以写个 light use 啊，等于差。然后呢去调用它。好，这时候呢 talking 呢就可以进行一个清空。好了，下面呢我们把整个流程来走一遍啊， 刷新。好，现在呢是一个登录的状态，比如说我进入到课程页，这都无所谓啊，它是个登录状态。然后呢，现在呢，我点击这个地方的一个退出登录， 这样能取消，哎，不会有任何反应，对吧？然后当我点击了确定好，这时候呢，他就变成了一个未登录状态了， ok， 然后当然我现在呢再点，他就会进入到登录这个界面，对吧？这时候又登录成功了。好，那么这节课呢，有关于这儿的一个退出登录，我们就先说到这里。

哈喽，同学们，那这一小节我们来做一下登录模块里边的最后一个小功能，哎，他们叫做退出登录。好，我们先过来看一下，我们到底要做哪些事啊？我们过来看 在我们页面的顶端呢，哎，用户的一个旁边有一个退出登录按钮，当我们点他的时候呢，首先需要去弹一个框，大家说为什么要弹框呀？ 哎，因为这个退出登录呢，本身属于一个比较危险的行为啊，他跟删除按钮是不是有点像呀？我们希望呢提示下用户让他呢做一个二次确认，当他点击确认按钮的时候呢，我们才去做实打实的一个退出登录业务，对不对？ 好了，那所以我们一个完整流程呢，就变成这样子啊，首先咱们点击退出登录这个弹框，当这个点击确认按钮之后呢，咱们开始去实现我们的退出登录逻辑，这个逻辑里边包含哪些事呢？哎，两个事情，第一个你是不得把人 加当前用户的信息给他清除掉呀，哎，清除掉呢，证明他是不是就已经退出登录了呀？那第二个事，你是要给他跳回到我们的登录页面，你就给他跳回去呗，跳回去的话，他如果想登录的话，那就重新登录呗。 哎，所以说呢，我们通常呢我们的退出登录业务前端呢，要做的事情就这两个哈。哎，他是一个通用的逻辑。好了，那接下来呢，咱们按照这个流程给他做一下这个事情。好，我们把这个流程呢给他定一下，放到这个位置上来， 那接着呢，打开我们的 cod 区域过来，咱们呢直接找到我们的退出登录按钮，它呢应该是在我们的 vivo 里面的 the out 好，里面有一个 name 组件，我来看在这个地方是不是有一个退出登录按钮呀？大家看它外层呢，其实已经包裹了一个组 哎，就是这个确认框组件里面呢已经配置好了，现在呢我们只要点一下退位登录，他就会弹一个框过来呢，我们先演示一下，好回到我们的浏览器 过来，大家看这里哈，当我们点退出登录的时候走，哎，你看这个框是不是出来了呀？哎，当然现在点击取消跟这个确认呢，点取消 可以关掉点确认呢，没有任何的逻辑啊，我们还没有写，所以说呢，第一步这个确认框呢，已经 ok 了哈，这个呢有组建提供的功能，我们重点是实现哪部分呢？哎，是实现我们的这两个业务逻辑，一个呢是清除用户信息，一个呢是跳转到我们的登录页面，我们重点呢做一下这两个事情， 好过来回到我们的 qq 区。那既然这个结构已经有了，那我们是不是得知道他什么时候点击了我们的确认按钮呀， 对吧？啊，那这个组件呢，支持一个事件叫做 confirm 事件，文档里边有写哈，我这里呢就直接写了 confirm， 哎，这是一个当他点击确认按钮时候自动出发的事件。好，这里呢我们绑定一个回调函数 在上面呢，我们声明一下，这个回家函数 好，里边呢，我们简单 log 一下，我们叫做用户 要退出登录了，保存，我们过来看一下当他点确定的时候能不能给咱打印出来，如果能的话，我们是不是可以在这个里边写我们的业务逻辑了呀？ 好，我们回到我们浏览器呢做一个演示过来，过来以后呢，当我们点退出登录点确定，大家注意观察这个地方哈，走，大家看用户要退出登录了，对不对？哎，所以说呢，我们这个 毁掉呢，已经成功执行了，那么是不是只需要在这个地方执行我们的退出登录的一个业务逻辑实现呀？对吧？咱说到两个事，第一个事呢是清除用户信息，第二事呢是一个跳转登录页面，我们一个以来啊，先做一下清除当前用户信息。 那我先问大家一个问题啊，我们现在的用户信息在哪里存着呢？哎，对了，是不是在我们的 usbal 里边存着的呀？诶，那咱们回到我们的 usbal 里边 来，来到我们的 store 里边，点开我们的 urd z s， 大家看这个是不是我们的用户信息啊？ 既然都在这个地方管着呢，根据我们之前的一个说法说呀，跟这个用户心相关的东西呢，都应该放到 pinion 里面去维护，对不对？所以呢，我们可以在这个地方呢给他增加一个函数或者 action 函数，它呢专门就是退出，退出时清除我们的用户信息这么一个 action， 好，咱们给它来啊，比方说呢，我们叫它啊 clear， 我们的 your infer 在里面呢，我们拿到我们的数据，拿到我们的 your 音符儿数据点 value 给它，等于一个空对象恢复加默认呗，这样的话是不是就清除了呀？哎， ok， 我写完以后呢，咱把它呢依旧给它 return 出去给咱组建，是不是就可以使用起来了， 那写到这里的话，组建中只要能把我这个函数调起来，是不是就可以把这个数据清空掉呀？哎， ok， 好，那回到我们组建里边，咱把这个 h 函数给他调起来呗。好，回到我们的组建里边， 在这个位置我们做一下。我们的第一步叫清除用户信息， 重点呢是触发我们的 x 函数，对不对？好了， store 呢，是一个现成的，所以说呢，我们直接拿到它点儿 里边有一个方法叫做 clear 啊， your info 调一下是不是就清除了？那跳回到我们的灯笼页，这个就太简单了，是不是用一下我们的 return 方法就可以了？好，咱们还是倒过来一个，哪个方法来着？ 哎，对了，是不是叫 you rooter 啊？好，咱们给它写过来一个 use rooter 加二哈，然后在这里呢，我们开始执行它得到一个 rooter 识别对象。 ok， 得到以后呢，就可以调他身上的方法了。在这个位置呢，咱们调一下布置方法。去哪里呢？是不是去我们的哎， login 呀？ ok， 回到我们的登录呗，这个地方呢就是我们的第二件事情，跳转到我们的登录页。 ok， 那两个业务逻辑是不是就都写完了呀？我们过来呢测试一下看看呢，行不行哈。过来，回到我们浏览器， 咱们呢在这地方尝试点一下退出登录点，确定走。哎，是不是退回来了呀？哎，第二个事情呢是没有问题的，看一下第一个有没有把当前邮信息呢都清除掉。 那咱们呢可以来到我们的本地看一下本地数据还在不在啊？过来，来到我们的。哎， look， sorry 里边，大家看这里院里边是 是不是剩下空的了呀，又发现呢，他是个空了，那偷看数据是不是就没有了呀？哎，证明呢，已经清除掉了。那我还想问大家一个小问题哈，为什么我操作的是 pina， 但是这个地方也同步变化了呢？ 哎，对了，咱是配置过一个插件呀，我们说了那个持久化插件，他始终呢会把 pina 呢和这个 local three 保持一个同步，对不对？哎，那边是什么，这边就是什么，你会发现，哎，不就是一个空的了吗？ 好了，那到此呢，咱就把这个退出登录的一个硬逻辑给他做完了，回来呢，咱们总结一下。过来， 咱们说了，这个退出登录呢，他其实是一个比较通用的逻辑，就是说呢，不管是呢什么样的系统，他的退出登录前段要做的事情都是类似的，无非就是清除当前的优惠数据啊，然后呢 跳回到我们的登录页面是不是就可以了？另外需要大家注意的是，我们这个退出登录呢，它属于一个比较危险的行为，所以说呢，最好呢是在用户点击的时候再多提示他一步，让他做一个二次确认是不就 ok 了呀？这是一个产品上的逻辑。 好了，那这一小节呢就到这里了哈，咱们过来呢还是把代码呢给他提交一下？过来把代码呢做一个提交。 这一小节呢，咱们是完成了一个退出登录的业务，也是我们登录模块里边的最后一个小功能 登录，哎，退出登录业务实践。好了，那这节课呢就到这里，下一小节呢，咱们继续。

好，这节课呢，来做一下退出登录，那当然，这呢是有我的课程订单中心之类这些内容的，这个呢，咱们后面再做啊，先把这个退出登录给他搞定了。好了，那这呢我也写好另一个笔记了，那我把它放到我这啊，然后这呢是有一个链接啊，供大家参考。那首先呢，我们需要去找到对应的这个退出登录这块一个内容，然后并且呢要给加一个事件，对吧？我们先找一下这个 hand 上， 在我们的公共里边，你看这，然后找一下这个退出登录，好，然后在这呢我们给他加一个事件，那我们就叫他，呃， out， 老九，好，那往下走，这是我们的退出登录，退出登录。 好，那么退出登录这呢具体我们要做什么事呢？来看一下啊。首先点击退出登录，应该是有一个提示框，提示我们要确定还是取消，对吧？这是 on the ui 要做内容啊，所以说呢，我们第一步啊，先要把它的一个呃提示信息给拿到，这是 on the ui 的啊，我们给它放这儿。 好，刚点击他的时候，那这时候呢，我们就需要给他进行一系列的提示，我们把这个拿过来，好，这内容就先不要了啊，先把它去除。 好，那我们这呢来试一试啊，来，说到这，当我点击退出登录，哎，有一个提示，对吧？那取消，就是已取消就会走到这个地方啊，然后呢，如果说我们点确定就会走到这来， 点下确定啊，就会走到退出登录这个是再次的， ok， 那么我们退出登录具体要做什么事呢？首先我们肯定要请接口，这是第一。然后其次呢就是我们还要把 top 呢给他做清除，对吧？然后其次呢就是我们还要做事情呢啊，就是把页面呢给他进行一个刷新，好，所以我们要经历的步骤，来吧，咱们看一下啊， 啊，那我们就先把那个接口呢给他搞了，这有个退出登录，那接口文档我就回家去看了，大家呢可以自行去找。好，到这呢就直接加一个，这是一个退出登录， ok， 然后这呢有一个方法，我们把这方法呢在这个地方进行一个引入，好，那就把它拿过来，然后到这， 然后呢他有一个判断扣的码，呃，如果说 is 的 mita 的扣的如果等于了二百，那么这时候呢就代表你点击了这个，呃，确确定已经是登录了，对吧？好，那这时候呢我们的消息框再弹出来，并且呢这个时候呢我们需要去刷新一个页面啊，那到这呢我们就需要把那个地方的一个 rose 给他引进来啊，这是我们的 rose 陆游啊，当然我们其实呢已经引过了这样一插件了，所以说呢可以 直接给它拿进来，呃， light， 我们这呢写一个 rooter， 等于 use rooter。 好，然后到这呢我们可以直接的刷新 退出登录提示，然后这样我们来刷新一下页面啊，这是刷新页面。好，然后呢再其次呢就是我们还要把 topic 给他去除了，对不对？好，那到这呢我们就先来试试吧，点击一下退出登录，点下确定好退出登录提示刷新页面， ok， 没问题，那这呢还显示一个登录状态，原因是我们这是通过 top 呢来获取的， top 呢已经存到我们的呃本金存储里边了，所以说呢，我们现在要回到这个拼点中，然后这呢我们要写一个方法，就是设置 top， 这呢来一个清除 top， 清除 top， 我们将它隔音儿 top 吧，好，然后把 top 呢给它设置为一个空就可以了。好，然后其次呢，我们到这呢要去用一下啊，清除 top top， 好，那这时候呢，我们需要把这个模块引进来哈，就是我们的 pna 模块 store 一块啊，然后这地方呢，我们可以用 char a 了啊， check store 下的 user， ok， 往下走，那在我们的下边，这我们就可以 写个 like 柚子啊，等于叉。然后呢去掉啊，这时候呢 top 呢就可以进行一个清空。好了，下面呢我们把整个流程来走一遍啊，刷新。 好，现在呢是一个登录的状态，比如说我进到课程页，这个无所谓啊，他是个登录状态。然后呢现在呢，我点击这个地方的一个退出登录，然后战斗取消，还不会有任何反应，对吧？然后当我点击确定好，这时候呢，他就变成一个未登录状态了， ok， 然后当然我现在呢再点他就会进入到登录这个界面，对吧？这是又登录成功了。好，那么这节课呢，有关于这样的一个退出登录，我们就先到这里。

行了，咱们上节课主要讲的一个什么呢？是全局，全局路有所谓，全局路有所 所谓。里边其实他针对的这个文件呢，就是什么呢？陆游里边的这个陆游里边的这个因为是 gs 这个文件啊， 这个打给他陆游文件是在 i 三 c 里边有一个陆游这个文件，因为这个文件是所有的这陆游都在这呢啊，形成了一个返回了一个对象，返回了一个对象供全局使用。那么在这里边呢，我们用一个陆游前置， 那个前置导航守卫，另外呢他除了前置以外他还有一个啊，他还有个后置，所以说你要 写后置的话，阿布特一尺上面一样，哎，他这个就是一个前一个后，他也是吐啊， 哎。你怎么退出页面？就是当你这个页面，你看你从这切从新闻切换到产品的时候，切换到英语的时候，他新闻的这个后置漏油就发生变化了，就你走的时候，哎，你走的时候他会变着，所以说有时候走的时候 他出一个啊，欢迎您再来，对吧？或者说是那个走头他有一个动画效果，就这么做出来的，所以说在他的这个陆游，那全局陆游守卫里边的他还有一个，那个有个前置守卫，还有一个呢，后置陆游，后置陆游，后置陆游啊， 就没有 nice 的这个函数了，他只有一个，那个突杠放，所以说呢，后出六个的用法也是完了以后这有个回调，是吧？这有个回调，这个出放。我们打错了，这个地方应该打不到，打到这个地方来，嗯，从这里边 我们写一些逻辑啊，比如说弹出一个窗框，欢迎您再来啊等等这些东西，呃，这是两个啊，这是那个全局陆游守卫，一般全局陆游守卫做用户验证，就是说账号权限验证的时候这个地方比较常见一些啊， 咱们再看看陆游的第二种就是陆游独享首位陆游独享首位，说白了一看你样式你们就知道了，这个陆游啊，不仅仅可以设置 到这，还还可以设置到什么呢？还可以设置到陆游的这个具体陆游里面，具体哪个陆游里面？所以说我们在 这个文件里面这两项我们可以把它去删掉啊，去注销掉啊，注销掉，注销掉以后呢？我们在比如说咱找一个，找一个英语吧，英语这里边咱们来一个比 book 啊， 比否樱桃，比否樱桃。后边呢？我们跟一个，呃，比否樱桃。有参数的，有参数的啊，比否樱桃，比否樱桃。我们有一个括号，用的他英文是一的六的写法，对吧？ 号码，然后呢？加到函数啊，然后后边别忘了打一个扣号啊，图号码，这是 是这个前置陆游啊，这是陆游独享的一个主要的奈克斯啊，奈斯用的时候就打啊，对对，奈斯得打，不打的话没有奈斯他怎么进入下一步执行呢？对吧？也就是说奈斯 nice。 那么也就是说当我进入英语的时候，我去，我去挨了这个东西，大家看一下啊，这是天 按理由进入英语的时候又刷新一下进入英语，点击，嗯，等会啊，在这， 这个是啊，这个做错了，因为两个英语一两个英语点他的时候他会弹出一个音，这就是我们做前日路由，当时为的时候，也就是说你进入 旅游之前你要干些什么事对吧比如说我要先拿到他的权限验证一般在这个地方就是先进行一些权限验证啊或者一些计算预算什么的如果通过了如果通过了对吧我们就放行是吧如果通不过呢我们让他返回 老枕啊对吧然后老枕老枕是哪个内老枕路径是哪个呀。老枕路径是斜杠我就直接让他返回 斜杠对吧。也就是说英语二你永远到不了英语二点击你看直接到登录了吧对吧。直接给你反映到这了如果权限没通过的话给你一个提示直接给你反登录了这种呢就是漏油的 那个独享守卫啊那另外呢他有前置是否也有后置对吧。设备有后置比如说阿富特这个 啊陆游的等会啊看一下。呃比方因他使用比方因呢他一比八是一样所以都要 nice 呃有法律权举是将一个对象写到这。呃这个地方这是但是阿夫的在戴帽提示联让中没有出现阿夫的印堂阿夫的印堂 没有出现这个啊看一下啊没有出现这个是不是代表这个地方就没有也说当我看了啊。 呃哦这个是个监督函数啊监督函数然后我们挨了一个 拜拜拜拜。嗯拜拜啊。对这个地方图房要什么无所谓毕竟他是个形态个头没有那样子。咱试一下啊 进入咱店的哪个页面。朋友进的那个是低音二就是他先点他进来进来以后呢再离开这是进来 再点新闻他这个后置好像没有但是这地方也没报错是我哪打的不对吗？ 白脸的白白你说阿福特樱桃兔双兔双 因为这个露营导航手艺，这平时很少用，咱们再测一下啊。 英语二这是路由进入，路由移出，这个地方不生效，同学们进入然后移出。没有这个东西啊，因为因为刚才看那个什么的时候 他这边没有带码提示，所以说没有这个东西，不要用他了，他只有一个漏油的组件的前置的 第三个，我们看一看什么呢？是组件，陆游那个陆游守卫组件陆游守卫就到哪去了呢？就不写 不，不在这个地方下功夫了，这个地方咱们就删掉了，跑出去录邮文件了，分别说找到音乐这个组件 这个页面，找到音乐这个页面，这是咱们的页面，他这里边的这些声明冲击，这是对的，是个函数吧？是放数据的门锁的是对象对吧？呃， 买锁的是个对象。 monty 呢？这地方咱没有打 mondy 生命中其函数对吧？除了这些以外啊，他还有些东西还有些东西啊，他还有一个什么 呢？有一个 b 方陆游音塔，这个是他的，也相当于一个钩子函数吧。钩子函数就是陆游进来的时候执行这个钩子里边这个函数，这是陆游更新的时候，陆游更新的时候和陆游跳转的时候啊，就离开的时候。 呃，更新的话就是组件，咱看一下路由切换地址时才会出发路由切换地址时，这个是路由还没进入时出发这个是对对对，进来发生变化的时候就出发，路由切换地址时可以出发。这个东西 一个是更新，一个离开一个进入啊。呃，咱们举个例子吧，就是还是一个进入啊，进入的话我们 人在这个音二这个底下，我们和对的平齐的地方，我们的，呃，他这喊出名啊，叫笔锋录油音的。咦， 嗯，看看是 是不是，应该不会是版本更新的问题。应该是有，咱试一下啊，比如说陆游英子，陆游英子，然后这个地方呢是个函数，然后底层有三个参数 低扣六一呢。进入漏油的时候， 我们去艾乐他一个康师傅一下他的来源，他来源，然后呢？完了以后呢咱们艾乐他一个东西， 比如说啊，放吧，就是康复了来源以后呢？弹出一窗口，然后再 nice 通过，那么这么着的话咱进入音二这个界面。音二啊，这个字打错了啊， 重新入，弹出了也说这个是生肖的，这是生肖的，还打印出了你这个图和号吗？对吧？这个这是前置的。离开的时候呢，咱们主要是一个离开的时候啊，这是阿福特， 阿欧又踢啊，他这个伊人踢啊，呃，不是，呃，离开的时候啊，离开那个啥奥特樱桃利物吧，看一下啊。离开的时候啊，笔放陆游利物，笔放陆游利物 就是这本身，这个音二就是个组件，就是个页面组件，哎， l e a。 对，在这个钩子函数上写这个相当于钩子函数了，你不是说了吗，在陆游进来的时候不是一个周期吗？在那挂了个钩子，这个钩子对应的函数里边就执行这些东西，钩子函数，对 对对， 咱们先看看这个，就是说这个是笔放漏油，立五 比方录用力，我看答的有问题吗？这个地方他说报错了，报错的话这里边有那个两个参数 兔方。呃，这个地方还有个问题，我看是哪的问题啊？呃，比 flot 多了个 r， 因为这没变色。还有一个问题，嗯，比 flou 记忆。嗯。哦，这个冒号多了。冒号是吧？对，听不着的话咱们测一下啊。测一下，这是英语二，哎，我要 离开了，这是从英语二点的。英语二啊，这是产品啊，我要离开了。嗯，这是英语二。 离开的时候呢？执行这个东西，但离开的时候。对啊。 嗯，他说那啊，那个地方，这个路由挑战这个地方没写那个词，应该是是吧？这没写，再支一下产品， 哎，这就行了。英语新来，这是陆游进入，陆游离开的时候吃这个。所以说离开的时候可以干一些事情吗？对吧？问个问候语啊，什么什么什么的。这三个呢？就是三个的，这个陆游导航守卫， 一个是全局，一个是独享，就是组件里边每优录优独享。第三个就是那个组件内的这个导航守卫啊，一共这三种。

行了，咱们这个看一看这个用户名登录的这个全部过程啊，第一个呢，我们在这里边写了两个这个用户名，写了一个登录窗口，一个用户名，一个密码啊，一个密码，一个用密码绑定了两个值， 分别是有点 pass。 然后呢，我们点击这个登录按钮的时候呢，做了一个出发时间，就钩捞针，钩捞针里边呢，我们在卖搜子里边就写这个钩捞针函数。 第一步呢，我们先设定两个用微号密码的正则，我们现在设的正则呢，是四到八位的这么一个正则，然后用正则对象里边探死这函数去测试 我们的用户名啊，密码的正则去测试密码他这两个太子的返回值啊，咱们原声里边讲过这两个返回值，他只返回出个 house， 对吧？所以说你测试成功的话， 他就返回处，而且这两个如果都为处的话，我们才能够康斯老那个验证成功，如果有一个不为处的话，我们就说他的密码永不对。 所以说咱们这是第一步的逻辑，咱们先把这个东西测一下，如果第一个是两位，第二个是符合逻辑点登录也不行啊，必须两个都符合，四到八位 登录，两个都符合要求带行的，那么符合要求以后啊，我们下部什么呢？下部我们要把这个用命密码呀，这是第一步啊，第一步我们先用第一步，用正则。第一步呢用 重则表达是重则匹配， 验证一下，验证一下用名、用户名和密码的合法性啊，这是第一步。第二步呢，二步我们要把这个数据弄到后台。第二步啊啊？数据， 呃，发到后台，发到后台去验证，去验证用户名，去验证有没有这个账号。 第一步啊，所以说我们这一步啊，我们这一步啊，我们先模拟一个，就说我们最后的结果啊， like， like 啊， es， 结果什么？等于处就有这个用户，先这么写一下，这地方呢？实际上我们要用阿迪克斯来替代啊，回头这一步要补一补啊，要补一补。 咱们现在先写一个什么？赖答， es 与处，也就是说后台反过来是个处，有这个账号，对吧？有这个账号，那我们现在进行第三步。第三步， 三步是什么呢？这如果用户存在或不存在，我们干什么？我们干什么啊？第三步， 所以说我们先判断一下，如果我们第二步反过来是按 es， 如果是处的话，不就表明有这个用户，对吧？如果有这个用户的话，我们干什么呢？我们首先第一步要写 logos， sorry， 写 logo， sorry， 因为在这个后台跟没有我们返回来的信息啊，他返回来一个什么信息啊？实际上他返回来的不见得非得是个普洱值， 因为我们这只写用微密码的，没写权限，对吧？所以说他得到后台拿这个值，拿什么的？返给我一个，返给我们一个什么值的，其实返给我们一个这个东西，说 obg 打过来的应该是一个什么呢？是一个对象，一个对象，对象里边呢？写着什么呢？悠字，悠字，比如说这个悠字就是呃 呃，优字，比如说咱们这输入的什么 adm a， 他这个优字实相就是我们上一步的这个优字，所以我们上一步的这个优字就优字，类似点优字，咱们我们这边一个东西，然后呢密码， 密码也就是我们上面的密码，还有一个权限，权限是从数据库拿的了，因为权限咱们输的时候没有，比如说是三啊， 也就说第二步反我们来的时候，返回我们的是一个用户名密码和权限用密码呢？其实就是我们上面填的这些东西吗？对吧？因为你验证如果合法的话，他才返回你这个用户名的，所以你反过来这个东西啊，其实我就是我们上部填的这个值， 填的值，他的验证在数据里有他返过，返过我们东西呢，就是这三项，当然还有你还可以返回他的这个登录日期啊，登录日期， 所以说他反了多了一项，多了一项权限，对吧？反复这么东西。所以说第三步的时候我们就确定一下，如果说这个 obg 存在的话，比如说 obg bg， 如果 obg 存在的话啊，我们去创造了一个什么东西呢？创造了一个由此用户，由由此用户，否则的话呢？否则的话 被扛走了一个，是吧？也就说 如果意思这样的话，我们看一下，哎呦， 这地方显示的有此用户，对吧？因为这个合法，这个合法，虽然我没有到数据库里验证，如果不合法的话 合法从这也没有因为他这你说老是不合法，这怎么还显示有死用户？咱们少了一步什么呀？就是如果两个用户不符合要求的话，这个地方是不少了个东西啊，不符 组合用户的话，他下边还执行呢，所以这个地方我们应该加个什么东西？你先放肆吧，是吧？ 因为你不合法的话，你下边别给我行执行这些东西了，所以这个时候我们在今天我刚才不合法的时候，他还显示有此用户，现在我们再测一下，我们这个就是不合法，我不合法的话我就是两个，两个数，两个数点击， 因为密码不对吧，所以说后边就不给你执行了。如果说你这个地方在不合法情况，你不打这个 boss 大嫂，咱还接着往数据给你找找东西去呢。再说你不执行的时候，不合法的时候，两个你再一登录，你看， 由此用户他又给你执行下，对了，他说不合法的，这个情况下，我们直接给他什么的每天放就完事了，上他房间执行了，到第二 二步呢，把这个数据发到后台，发到后台后台的时候呢？给职务给我们返回来，只有两种情况，有可能 bj 一个空对象吧，可能是个空对象，可能是个有对象的职。 看一下，如果法律是空对象的话，那合法。现在是合法了啊，一二三四，一二三四，登录由此用户啊，由此用户，也就是说他这显示的是由此用户，因为 obg 这显示是空，对吧？所以说这个地啊空对象不能自动转成，这个不能自动转成，这个不尔直 boss， 也就说空对象不能转正。如果数组的话，咱们看一下过他这 obd 法律是数组，咱们看一下啊，一二三四，合法吧，合法。一二三四，咱们看点一下啊， 用户，用户，这个地方如果返回有空数的话，这也不对头，是吧？咱们可以，如果返回是数组的话，我们是不可以用 愣死来进行那个咱，咱们俩如果说有直的话，不死用户啊，咱们如果说法国数字好，咱们用愣死的点愣死是吧？如果他有长度为零的话就是 no no no， 对吧？所以说咱们再试一下， 这么着的话，咱们一二一一二，这都合法的，都合法的一 no no 二。所以说对于数组的话，我们是不是要通过愣死？你要通过这个通数组这么来方案的话好像不行，对吧？所以说我们用他的愣死属性 论是说来判断我们后台给我们反过来的纸有没有，那么如果用户怎么办呢？用户就这一项吗？就这一项吗？啊？如果给我们反过来的这个空对象，比如说 like， 他给我们反过来只有两种情况吗？一种是空对象吗？啊？ 如果是空对象的话，如果是这个的话，我们可以怎么判断呢？不过 obg 第二优子如果存在的话，是不是就可以判断有死用户，对吧？你这么着的话呢？我去打 合法的一二一二三一二三四四，刷新一下，等会刷新一下啊，一二三 四，一二三四。合法吧，登录是不有此用户啊，所以说这无无此用户的时候呢，就是这个地方空的是空的啊，法律是空的，空的以后呢，我们就算我们再打一个合法的话一 no no no 啊， no， no no， 也就是说我们可以通过这种方式来判断，后台给我们如果没有这用户啊，他会反这个空对象的，对吧？ 那么我们可以判断，如果说反过来的东西有这个值，那么怎么办呢？有这值怎么办呢？我们就写 logo， sorry， 我们把我们的优乐内幕就写什么呢？就把这个用名写进去吧，就是这个地方应该写哦 b b 点 u 字，对吧？还有一个是 o b j 二 pass 权限呢，我们写 o b b 点权限啊， 这不就没问题了吧？就说我后台反我们的是这个值，我们拿到这个值就要先判断他有没有，如果没有的话，如果这个账号没有的话，我们可以给他一个提示，比如说给他一个 ilout flot， 无此用户， 无此用户。然后呢？让他去转到什么呀？让他去转到登录页去，对吧？蕾丝点啊 ot。 其实我们这个爷们就是捞人我们这个爷们就是捞人啊，无此用户咱们就不动了，不动了啊。也就说当我阿寻反过来是一个空对象的话，空对象一二三四，一二三四， 然后录五子用户，对吧？五子用户完了以后他就逮着一会不动了，对吧？所以说如果成功的话呢？成功的话写 logo， sorry， 然后转向，不转向呢？因，四点，这才转向的 lue， 二点不是，难道什么呢？ 转到咱们的新闻页去，新闻页是这地方怎么写来着？应该是个对象吧，对吧？你们的名字。然后是六十万有，六十万有里边，陆游里边这个新闻是哪个页面？转到英里是页面，英里是这个。 整到这去，整到这去，对吧？因这，所以说我们在这如果登录成功的话，一二三四，一二三四，然后登录成功。呃，等会啊， 逻辑。嗯哦，我们返回值还没给他去掉呢，把返回值弄过来啊，这时候后代给我们返回这个数据，是这个数据，我们就一二三四， 一二三四，这都是合法点击登录，知道吧？这转到新文件去了吧？啊？就转到新文件去了，所以说这时候我们 low 温度，你看温度似的叠的，这时候登录件 logo 所里就有东西了。啊 啊？这是咱们存的那个权限吗？又是怕都存在这里面的吗？那么这三个值我们在任何的值资组件里面都可以拿到的，所以这是咱们的第一步。 第一步分成这么三步，第一步呢是政策验证，政策验证完了以后呢？第二步上后台数据库，拿数据做比对，后台给我们返回来一个东西，这个返回来的格式啊，都不一样啊。 之后咱们讲那个，呃，后台的时候，咱们再说反过来的格式啊，最简单的格式就是这种格式，然后我们去判断这个格式里边有没有反过来这个状态，如果有的话，我们可以看日本的存储， 然后直接转到这个页面就行了，没有的话直接按链的啊，这是咱们的在登录页要进行这么一个基本的处理啊。

终于要写瑞吉外卖第一天实现登录和退出功能，先看效果，启动项目，输入访问地址，来到登录界面，用户名，毛头密码幺二三。登录成功，展示外卖后台， 点击退出即可注销登录，进行密码教验，密码显示错误，可以看出是动态检验密码的。看着前端界面还有其他功能，今天只实现一个登录和退出功能， 他的逻辑就是接收前端传来的参数，然后进行 m b 五加密处理，对数据库进行密码比对，如果密码一致，进行员工状态， 员工状态式启用，则将员工页放入筛审中，返回成功。两个教练有一个为 boss 登录则失败。登录成功后，可以展示 后台界面，我们在用户名位置点击退出按钮，他就会删除存储在 fashion 中的员工，退回到登录界面，像 job 大神又迈进一步。

这节课呢，来做一下登录成功以后获取用户信息的一些内容，并且呢需要把用户信息展示到我们的识读层，就比如说刚才我这呢，已经登录成功了，那么这个地方要显示用户的一个头像或者昵称等这样的一些东西，对吧？那是要根据我们原型来的，而这呢要显示的其实是一个头像。 好了，那下面呢，我们来具体看一下这块的一个操作啊，那首先呢，这个地方的一个接口，这个 get info 啊，就是来获取用户信息的。好，那么在这呢，咱们也可以看到对应的这个数据啊，来看一下这空台。好，我这样呢，刷新一下。 好，我们看这儿，如果说 r e s the meta cod 码等于二百，就证明一定是获取到了用户的信息，对不对？那所以说呢，我们这儿判断，如果 i e s the meta 的 cod 码它等于了二百，那则证明它已经是呃登录的 状态，为什么呢？是因为获取到了这个用户，获取到了这个用户的信息了，对不对？好，那这时候呢，我可以给个数据啊，这是呃用户信息啊，用户是否是 登录状态，或者说是否是可以获取到用户信息的？好，那这两个呢，说的是一回事哈，那我们这呢来一个意思，劳紧啊，等于一个 if， 他默认为 false， 然后如果说你能获取到，那我就让他呢为一个处， 那这样情况下呢，我们在这就可以判断了，比如，如果啊，对 v 杠 if 嘛，如果说你是为处好，那么则显头像啊， v 杠 s， 否则显示这个东西， 对吧？那当然我们可以让他们为一个起始，如果说啊，他为处则显示什么是吧？这样也是可以的。好，没关系啊，那到这呢我们先要做的事情就是要拿到那个地方的一个布局 局啊，我们在这呢把这个布局呢拿一下。呃，这个布局呢是在，我找一下哈，是在这个地方，嗯看一下这个布局内容。 呃，应该是在这儿还有往上在这个地方啊，这儿的这个布局内容呢稍微有点乱啊，我把它整理一下啊，这是一个 div， 这是，哎，没问题。好，我把这块儿放过来，当然你也可以先判断这个再判断下面这个。 好，然后呢我把这一块的 class 呢也给它拿过来啊，这是它的一个整个的这个 c s s。 这样吧，我把整个的 c s s 都拿过来吧，防止 后面咱们再去弄啊。如果大家做的话呢也可以直接去把 cs 拿过来，因为 cs 布局呢大家都会啊。我在这就不去重复去讲这个东西了啊，先给他干过来，然后我们去看一下，那在这呢一定会有很多错误。 好，我们这呢去调一下啊，来 v 杠 if 有一个。呃，我们这判断的是 is 老颈，对不对？好，他好取个反 啊。如果说这儿为处那就 force 吧，对不对？如果 force 为处好也说没有登录显示这个如果登录呢这儿就是 v 杠 s 就显示这个啊。当然我们先把这一块内容先全部给它清掉啊。啊，我们看一下。 好，这就是我的登录状态，就会显示多一个我的课程。好，然后这呢还有一个东西我先把它清掉啊，这呢还有一个头像啊还有个头像。 然后呢如果说我先把这个去掉，那么头像呢分为两种，其中一个呢是默认头像，还有一个呢是用户，他如果说设置过头像，那会显示他本身 那个头像好，所以在这呢还要获取到我们用户的一些信息，比如说他的头像。好，那到这呢我们就来啊，这是判断，这是，这是判断的一个操作啊，我们在这呢先 console 一下吧，把这个 i e s 打印一下，好，我们刷新一下， 当然上面呢是一定会报错的，我把这呢先注掉啊，然后这个 vgas 呢也给他先干掉。 首先好，这时候呢他这有一个 i s 点 deta， 点 deta， 这里边呢就是所有内容，对不对？那到这呢我们首先第一步是不是应该要负一个值啊？啊？然后呢再进行一系列操作是不是？那我们这呢就来一个 不值操作啊，这是用户的信息了啊，用户信息来一个叫，呃，我看这个地方啊叫 use info 啊， use info， 好，那就是 是 using in four 的 value， 等于 is 的 date 的 date 啊，这里边呢是他信信息啊，这是用户信息 啊，包括他的头像，他的昵称等等。这样东西。好了，到上面呢我们就可以判断了，把这块打开，如果说我们用户已设置过头像或者有头像，我们就走这个，否则呢就走默认头像。好了，到这呢我们再来看，刷新一下， ok， 他就会，哎，这有一个 v 杠 s 没有加上啊，刚才我们删掉了好，他就会显示用户之前已经设定好这个头像啊，他设置过这个头像， ok， 那这块我搞定了。然后他其实呢还有一个是鼠标一进去会显示的一个内容，我们把这块呢也拿进来哈，鼠标一入 啊，就是划过头像啊，我把这块内容呢，呃，给大家去找一下这块的一个布局， 这个代码确实有点乱了。没关系啊，我在这呢给大家去调一下啊。好，基本上差不多的，我把这块内容拿到咱们这个布局里边啊，应该是在这一块。好，先放过来吧，然后我们就一点点去调，看看哪有问题啊。 呃，这一块的头像什么的头像这是 ok 的，这儿有个 is 判断的。呃，往下看一看 啊，这一块的数据我先都给他清掉，然后这一块内容这块内容呢是有一个图片的啊，我把这图片呢先放到我们这个项目里边，这怎么有一个文件 在这，在这好给它放进去。好，我们再次看一下，这我保存一下啊，我看一下这有没有刷新一下。 哎，你看这个布局内容呢，就算是拿进来了是吧？好，然后呢回上去啊，来看一下这块的一系列操作啊。呃，首先呢我先让他默认的展示出来吧，默认的展出来我保存一下这块布局没问题。 好，当我刷新一下呢，肯定会出现很多很多错误。呃，首先呢用户的昵称，我们要看一下用户的昵称 来到这儿呢，我们就来看一下这个 user 音符儿，也就是 i s 的 date 的 date， 哪个是用户的昵称？用户的昵称应该是这个，这儿呢应该是 user 音符点儿。好，那这儿就会显示一个它的昵称幺二五五三是吧？ 好，然后这地方呢展示的是什么呢？展示的是他的 vip 情况啊，比如说他之前充过会员啊，我们需要给他进行一个这样的展示。好，呃，然后在这呢有一些数据，我这呢给大家说 下这个数据是怎么回事啊？这样，呃，我们先去看一下这个用户的信息吧， 在用户信息数据里边呢是有个 vip 音符的，大家看到了吗？这儿呢也是一个对象里边呢有他的这个过期的时间，下单的时间，还有一个就是他一共充了多少时时间的会员啊？包括他的七日时间，以及他的一个结束的时间。 在这，所以说呢在这呢我们要把这个呃这个这样的一个时间戳转换成一个用户所识别的一个呃，这个时间啊，那这样呢，我们就先把数据拿到， 这是用户 vip 情况啊，会员情况啊，它里边呢也是一个对象。好，那这样呢，我们就需要做一个复制 i s 的 date 的 date 下面的音符 啊，这个呢是呃判断是否可以获取用户信息。好，那你大家看啊，这样呢就有这个数据了，十二个月会员，这个十二个月会员呢就是这个数据。 好，然后呢下面呢还有一个是什么时候到期啊？什么时候到期，那这个地方呢就需要我们自己呢要进行一个判断了，对吧？那他给到的一个时间呢？是一个时间出哈，来，我们看一下，这呢有一个开始时间，有一摁 time 是一个结束的时间。好，下面呢我们看一看下这块呢该怎么去调整啊？ 来到这我们来计算一下会员啊到期时间，那这呢我们肯定是要拿到 n 的 time 这个数据的，那我们先去做的事情就是， 呃，有一个我们的这个日期对象点，好，这是一个时间书，我们来看一眼， ok， 行，然后呢，我们需要做的事情呢？就是拿到那个过期的时间，减去现在的时间就可以了。 net。 end 等于用这个到期的时间，就是它 的 value 的 end 啊，然后呢，减去我们现在这个时间。好，那这时候呢，就算出来一个时间差，对不对？那这时候呢，我们再给一个数据 具体展示。呃， vip 到期时间，或者说 vip 到期时间吧。 light， 呃，我们叫它摁的 time 吧。 vip 等于。啊，这个地方呢，就不给数据了啊，然后到这呢，我们就复下值就好， max 点儿。 pro， 我们用这个值去除以一千六十就是二十四。好，那这样话呢，这个数据就可以展示了啊，我们把这个值放到 还有多少天过期？放到这我们来看一眼。还有一个是二百零三天到期啊，如果已过期呢，我们同时也会显示一个已过期。多长时间 啊？这个已过期呢？呃，这个计算啊，这个计算也是一样道理啊。好，那计算差不多了。然后呢，这个地方呢？是鼠标一进去展 展示下面这个内容，当然我移出呢，就应该是隐藏的一个状态，对吧？好，那这时候呢，我们要做移入和移出哈，移进去呢，是通过这个头像这儿移进去的。好，那这时候呢，我们要给个实践，移进去我们就让他显示 好，移出整个的内容，我们要让它隐藏，拿这个值去控制一下就好了，显示用户更多数据 reports， 然后我们在这加一下， 它本身是为 force， 当我们移进去显示移出来隐藏啊，那这样就没有问题了，来刷新一下整体走一遍，移进去显示移出来隐藏，对吧？ 那下节课呢，我们就可以把退出登录这块呢搞一下，退出登录这块搞完以后呢，我们就可以登，呃，去做这个什么课程页呀、播放页呀、课程下单呀、购买呀等等一些东西了。好了，那么有关于这块的一个啊，用户信息的展示我们就先说到这里。

这里呢我要给大家详细描述一下他这个权限是怎么处理的，我们在瑞特蜜中去给大家描述啊，就是路由权限的路由权限的业务， 我们这样，我们先第一先定义好， 定义好全部的陆游，全部的陆游地址，然后第二我们再通过用户不同 向后台请求不同的用户权限， 用户权限数据。之后第三步对用户权限做对比，谁和谁对比啊，就是 对比，就是拿你的用户请求到的数据，就是请求数据，请求数据对比当前已经定义好的全部路由， 那么如果我们请求地址中和全部留能对上的部分就是取出来，能对上的部分就是取出来作为路由配置，对不上的部分说明他不具备这个权限，那就忽略他 就这个意思，这是我们整个的一个业务，那我们来这样来做，首先我们是不是去路路游里面将全部的路由定义好啊，然后跟我们使用，对不对？那我们这边定一个文件， 就是动态的一个路由，对吧？路跳点 gs， 那这里面是所有我们刚刚在上面写入的那些所有的页面，我 这里不写了，我就把我之前写好的所有的页面拿过来给大家用就行了，因为没必要写一遍，咱大家读一下看啊，订单页面，订单列表，然后产品，这是订单管理啊，这是产品管理页面有这么多， 大家可以看对应的页面结构。首先订单页面，我们来看一下，在这里边有他的这个利斯特呀，呃，产品管理呀，回退呀，还有这个里边的一些信息， 骨骼，产品管理的信息，这边还有订单管理，看在这都在这，基本上所有的页面都在这了，然后下面我们把这个所有的页面呢给他以路由的形式定义出来，大家看啊，有 plus， 有 come on it， 有内幕，有麦的，麦的里面有内幕属性，刚刚说这个内幕属性很重要，我们就拿这个内幕属性 跟我们后台请求过来数据的内幕做对比，两个内幕如果完全相等，那就说明他具备这个权限，如果两个内幕不相等，说明他 不具备这个权限。我打开这里面所有的结构当中，我都给他定义好了，谁属于谁的子路由都已经写好了，最后我们把它导出好，这样的话就是我们陆游部分的这个定义，那此时我们全陆游第一步搞定了，就是他 接下来我们要通过用户不同去请求不同的数据，要做网络请求了，对吧？所以现在我们去处理后台，后台这边我们在对的当中要去创建新的数据源了，那我们看下这个数据源应该怎样？首先 我们这里其实是两条数据啊，第一个我们来创建一个叫额的命，呃，下线加个权限的意思吧， 在这摘下，然后呢我们再创建一个，那要么就是 vip 的权限嘛， vip。 第二针， 然后他们的权限不同，我们先来看一下额的命，额的命是全部的权限，所以这边呢，我们去看一下这个权限， 好，那这样，这是全部优惠权限，我就全部考被管了。但看这个好像跟我们刚刚那个路由很像啊，对，他对吧？里边有内幕，有抽中有内幕，不同的就是我们这面只有内幕结构是长成一样的订单结构，然后里面有紫元素，有订单列表，生产结构是一样的。跟哪个结构对比啊？跟我们刚刚的路由全线结构对比，大家看一眼， 你比如说最外层是订单管理，那我这个数据员也是订单管理，里边有紫元素，紫元素当中叫什么？ 紫元素中有有这个订单列表和生产管理，我们这里也是有订单列表和生产管理，生产管理又有紫元素，又有紫元素，有生产列表和审核管理，我们这里也是生产列表，生产管理都是一样的，所以 这个是额的面，所有的权限都具有，我们复制一下。那针对于 vip 呢？就没有这么多钱。假如说 vip， 我们你只你那有审核功能，你只有看的功能，你没有审核功能，所以我们把审核功能干掉。那比如说用户不同，他返回数据不同，比如这个就比他少了一条数据，少了一个页面，就是这个样子。好，两个页面我们处理完， 现在回到我们的页面中，在这边我们要去再增加一个网络请求的访问了，就是你再增加一个权限的访问。好，那先在这边把这两个权限都引入啊。首先 cos 的，呃，一个是额的命的，一个权限 等于是 care 进来，第二个对他当中的这个对面的权限，这个提示怎么就没了呢？ 然后再来一个 cos， 那这是 vip 的权限，对吧？哎， m 是小写的， ok， 点杠。对的，下面的这个 vip 下线吧。对，好，然后在这里边我们再去访问，还是 get 请求吧， apple 点 get， 那这个我们就叫全线吧。 然后呢？此时呢？我就奎尔，哎，我克尔干嘛啊？ iq r e s 对吧？ 啊？这边也需要参数，我们把这个参数读一下，还是放在这里，这样把它复制过来，放在这里，放这里的话，我们会根据你访问的这个用户不同，跟你返回不同权限。如果你等叶的命， 用户等于我的命，我就给你返回我的命的权限，如果你用户不等于我的命，我就给你返回 vip 的权限。好，就是这俩好，我们这边可以要重启一下服务器， 退出运营状态运行，运行之后呢，我们这边打开浏览器，在浏览器当中我们进行访问，如果等于额的灭 啊，不是这个了，这个我们要改成什么皮样？嗯，如果等于我的面，大家看 六审核管理，如果不等于的秒加个一啊，审核管理就没了，对不对？所以他权限其实是不同的。 这个服务区端我们就写完了，服务区端写完之后我们就看前端了，前端的话，首先你有顺德网络请求嘛？所以在这边有一个 fash， 哎，这个我们有了。好，这个刚刚我们是写一篇的时候，是把这个部分给大家提前写出来了，那大家注意个问题啊，这一块是 用户权限，大家知道这个用户你不可能在网络请求的，去访问吧，这个用户在哪里存着呢？是不是这个 u 字，这个 u 字是不是在我们本地私道里存着呢？所以这里我们引用私道点杠 扫，然后扫里边存着这个数据，所以这里边我们就直接就贴上一个什么呢？ a x l s 点 get， 在这个里边呢，我们直接请求他。 嗯， api 结构之后找到就是 prmi 三四 om， 然后问号优字等于什么？加上一个 stow 点 staythe 点优优字， ok 就可以了。 好，那这个网络请求就成功了，先扔一边，接下来无非就是你进入到页面之后，用户登录了，或者用户已经登录过 之后，来判断这个用户应该具有什么样的页面。那这里边这个页面的数据大家还是要存的，为了后期方面操作呢，还是要存到 本地的。那本地我们肯定是啊，不，不是本地啊，是存到 v v x 里面，不用存本地啊，存到 v v x 里边，存本地的意义不是特别大，所以在这里边我们还是有额外处理。这个我们下节课来说，本节课先到这里，谢谢大家。

how are you doing view devs welcome back to the channel？ we're going to be taking a look at view emit a great tool in view 3 that allows us to send custom events from a child component to its parrot this can be used to trigger certain events like closing a pop up for example or just to send data from a child component like when we need to make a custom input so how does view emit work each of you emit call can have two arguments the event name and this is the name that we can listen to in our parent component and a payload object which is data that we want to pass with the event and this payload is optional if you don't want to pass any data and there are a couple different ways to use view emit in your code the three that we will be looking at are in line the options api and the composition api each of them has their own pros and cons depending on your use case so let's just check out an example in all three and then you can determine which one works best for you so first emitting inline events in view an example of where you might want to send data out of a component is when building your own custom form input let's imagine a custom text input so here we have a div a paragraph and then the actual input text that our custom text input is wrapping around so let's say that our pairing component is set up like this listing for an event called custom change and then logging whatever value its past inside our method section to achieve this we need our custom text input to listen for the native input events and then emit the custom change event actually pass the value of our original change item we need to send our custom event with a payload in this case， we're gonna send event target dot value as a second parameter and that's it now if we type in our custom input our pairing component will probably log all of our changes so the second way to emit custom events is using the options api with this emit like almost everything in view 3 we have the choice of using the options api or the composition api in the options api the emit method can be called using this so in our my input example let's say that instead of calling amit in our template we instead call a view method first then inside our method we can call this dot dollar sign emit and same as last time pass it our event target value and that's all so let's try this out real quick and awesome it works exactly the same and then the third method is emitting events in the composition api with context emit in the composition api since setup runs before our component is created we have no access to this like we do in the options api instead we can access our emit method by using the second argument of our setup function context context has access to your component conan slots attributes and most importantly for us it's a mid method and we can get access to emit by either having set up take the whole context object or getting only emit by destructuring context in our parameters and then we can just call emit in the same exact way call emit give it the name of our event and then pass in our arguments once again let's just check this out real quick and awesome it still works so now you know three different ways to make custom events in view but let's take a look at two tips that you can use to make your custom events even better in view three we can actually define custom events for a component using the emits option in our export default this is important for keeping good documentation and knowing exactly what each component does also defining events in emits allows component events to take priority over the native events right now our event is called custom change if we just change it to change right now and look at what happens we'll see that multiple things are getting logged however， if we go in and define our event called change we can override the default action and only be capturing our custom event and then the second tip is to use kebab case when listening to events this is essential if you're still using view 2 because in view 2 event names do not have automatic camel case to kebab case conversion and the v on directive automatically converts your event names to lowercase what this means is that certain camel case named events will be impossible to listen to in view three event names like props and components are automatically converted between the different cases so while it won't break your code similar to the idea with props it's still the best practice to stick to each programming languages conventions and use camel case in your javascript and kebab case in your html so that's all for this video i hope it helped you understand to stand the submit method and how it can be super useful in your view project if it did make sure to hit that like and subscribe button to help out the channel and i'll see you in the next one。