登录的前后端实现：token、Vue 导航守卫、axios 拦截器等

aiai手机官方:
老师讲的真的太好了，最近再搞vuecli项目，时间不多没办法系统的学，只能看官方文档然后找项目自己研究，看到老师的视频有些看文档不懂得地方豁然开朗，再去看看就能理解了。但是有个问题就是单个视频不太连贯，不知道up主能不能说说前一期视频在哪[大哭]以后视频要是是拆开的知识点能不能在简介里大体写一下以前是否讲过或者说可以去搜啥[藏狐]还有最的三连都给老师了

【回复】能有帮助到，我最开心了！这么晚还在学习呀！[支持] 非常感谢支持和反馈，建议我收下了，后续视频改进。零散是因为并没有全部讲课都录下来，还有部分录的课因为需要剪辑掉的部分太多没有去发。你说的增加连贯性的具体建议，我收了，下一个视频如果有需要，我就加进去，万分感谢[爱心][给心心] 你要是有不明白的地方，也可以随时私信我提问的，我会帮忙解答。你这是我做 up 这两个月评论最长的啦。[呲牙][呲牙][呲牙][给心心][给心心][给心心]
【回复】还有谢谢三连，哈哈哈哈哈[呲牙][给心心]
【回复】回复 @跟华晨学前端 : 真好，讲的真好，感谢华晨老师
沉闷的城:
就这个东西， 面试一家外包的时候把我问倒了，说：如果只设置beforeEach全局守卫，登录后，一直不操作，等着token过期后再操作就可以绕过token限制，怎么办

【回复】回复 @可怜兮兮的大包子 :因为 Vue 导航守卫，是通过验证 token 的存在性，来验证是否可以进入页面的，如果 token 已过期，则导航守卫是无法知晓的。这时候，就需要用 axios 响应拦截器，借助后端对 token 的验证结果，来告知前端，进行后续操作了。
【回复】回复 @luckyAquarius :简单来说，就是前端的localStorage中还是有token的，但是这个token在服务端已经失效了。 然后，路由守卫判断存在token，那我就向后端发请求，可是后端返回的是401，如果没有使用请求拦截器，那么前端还是一样可以拿着失效的token发请求，其实应该在通过后端API请求返回401的第一时间，就把本地的token清除，并且跳转到登录页面。
【回复】token过期了是无法操作后端。不然要token干嘛。拿的数据除了缓存，一点用都没有。用户体验，后端会给过期时间，在过期前刷新token就可以了。为什么还会有这种操作？拿已过期的token去登录？登录不验证token。你让他登录。第一次登陆了，过期前必刷token。退出token过期。token过期不给登录。
栗子课堂:
登陆逻辑前后端完整实现： 1. 用户名、密码验证成功后，后端签发token给前端 2. 前端把token保存到本地存储 3. 每次请求前，通过axios请求拦截器，统一发送token 4. 通过vue导航守卫，和axios响应拦截器，统一保护页面

【回复】总结的非常好，精简且准确。很棒！[呲牙]
木守OvO:
很好的从初学者的角度分析了问题 很赞

小怪兽_哔哔:
谢谢老师的分享，前端小白学到很多。最近在看一个项目的登录流程，项目中在require.js中捕捉到错误码就返回登录页，引发用户登录后在页面一段时间就会报错然后退出并返回登录页面的问题，应该就是没有对token进行过期处理，只是简单粗暴的退出了。 总之，老师的视频整个流程非常清晰，并且原理方面前后端都覆盖到了，还学到了axios的请求和返回拦截，感觉非常实用！再次感谢感谢！老师方便的话能分享一下源码吗？想参考下并自己重新写一下整个流程！谢谢老师！！！比心❤

【回复】回复 @跟华晨学前端 :好的！谢谢老师！马上去看
【回复】非常开心对你有帮助哈，不好意思最近都比较忙，回复比较晚。这课的源码我有分享到我的 GitHub 的，仓库是：cc2937/lecture-login 加油哦~
叫我李二白:
好棒啊，这么细致的讲解。投币关注了

一乐的拉面:
个人整理的笔记，感兴趣的小伙伴可以看看https://blog.csdn.net/weixin_45630258/article/details/122648599

小小鲤鱼-:
您好 ，我有个疑问就是，用axios拦截器为请求添加携带token的请求头，为什么不直接在const request=axios.create({ })里面添加携带token的请求头

【回复】回复 @小小鲤鱼- :如果我们用 const request=axios.create({ }) 设置 token，想象我们现在还没登录，先用一个标签页打开页面，这时候没有 token；然后再打开另一个标签页，登录。再到会第一个标签页，这个标签页中的 request 发请求，就还不会带上 token 哦。
【回复】回复 @小小鲤鱼- :没事 加油！
【回复】回复 @跟华晨学前端 :好滴，谢谢
AI视频小助理:
一、如何在登录前后端页面和接口上进行保护，以及如何保存登录凭证和判断token是否正确。同时，还介绍了如何指定前端页面需要登录。 00:01 - 登录页调整，后端生成token返回给前端 00:57 - 保护前端页面和后端接口，防止未授权访问 04:55 - 保存token到用户电脑上，方便下次登录，同时指定需要登录的页面 二、如何保护前端页面，需要定义白名单，判断本地是否有token，如果本地没有则跳到登录页，如果本地有token则需要后端验证。 08:24 - 需要定义需要保护的页面白名单 08:57 - 判断本地是否有token，若无则跳到登录页 11:37 - 301代表永久移动，302代表临时重定向，204代表删除成功 三、HTTP请求中四个地方可以传参数:路径参数、查询参数、请求头、请求体。同时还介绍了不同状态码的含义及其处理方法。 16:40 - 介绍URL中的路径参数和查询参数的概念 20:52 - 讲解四个地方可以传递参数：路径、查询参数、请求头、请求体 23:28 - 401状态码代表用户未登录，403状态码代表无权限，404状态码代表资源不存在 四、在前后端对接接口时，如何通过HTTP状态码来判断接口是否存在问题，以及如何查看参数是否正确传输。 25:00 - 检查接口请求地址是否写错，返回404代表接口不存在。 26:11 - 检查参数传递是否有误，可以通过控制台network查看参数传递情况。 29:30 - HTTP状态码分为成功、重定向、客户端错误、服务端错误等，例如200、301、400、401、403、500、502、503等。 五、如何通过监听keyup事件来实现点击登录按钮的功能，同时还介绍了如何通过计算属性来实现禁用按钮的功能，并讲解了页面的布局优化。 33:20 - 点击实现需要写点击时间和监听key up事件 35:20 - 监听最外层元素的key up事件，限定为回车事件 39:04 - 使用弹性盒子实现居中，并设置背景色来解决间距问题 六、如何解决登录表单中的问题，并讲解了如何保存访问令牌到本地存储，以及如何处理跨域请求 --本内容由AI视频小助理生成，关注解锁AI助理，由@文心9961 召唤发送

玉米地一哥:
华晨老师，请问一下您的完整的前后端课程讲解在哪里能付费观看吗？

【回复】你好，你可以加我交流，没问题的。如果问题比较多需要花时间多一些，适当付费即可，没关系的。另外，感谢认可。
顾清xi:
看你的视频学习到了很多。还是希望老师下次录屏之前先说说和那个对应[笑哭][笑哭]。已经三连

【回复】非常感谢！哈哈，好的好的，哈哈哈哈哈
干净的坏蛋:
老师我是后端的学生，前端只需了解，看见老师熟练的使用浏览器开发工具好舒服呀！老师可以详细的分享一下浏览器常开发者工具常用的功能不非常感谢[呲牙]另外我想自己开发一个网站，就只会最基本的前端，不会写自己想要的样式好难受呀，有推荐的课程吗。就是给后端程序员看的前端课程，我就需要会简单的样式布局就行，感谢老师已经三连，还有老师的键盘声音好好听，是什么键盘了呀[打call]

【回复】谢谢老师回复祝您工作顺利身体健康[爱心]
【回复】好的哈，年后我准备继续更新课程的。样式学习的话，你可以联系我哈，我自己是有在带线上的不同背景的学生的。讲课、听课其实会很快的，但是学习最关键的，是自己的 “习”，如果有老师的反馈辅导，唯一的帮助其实是节省时间。非常非常感谢支持！！键盘是一个几年前买的青轴机械键盘，哈哈。
珂学家珂朵莉:
[热词系列_三连]，希望能出一期前端和后端的文件上传[脸红]

【回复】哈哈，年后哈。文件上传很多内容的，包括 Blob、File，阿里云 OSS、断点续传等
NAVA高级工程师:
问一下，兄弟们，axios的then接收的response.data是原生node的response响应吗

【回复】嗯，是的。response.data 是 JSON 解析后的响应体。
隔壁老王的哔哩哔哩:
老师你这个测量页面像素的工具是啥，win有吗？

【回复】PixelSnap，win 下部署很清楚哦~