Vue驾校-从项目学Vue-6

前言：

往期Vue框架内容：Vue驾校-从项目学Vue-1
算法系列博客友链：神机百炼
强烈推荐Y总所有课程：小白友好的程序教学社区

项目实战5：

1. 登录组件：

1. 按钮表单调用全局变量Vuex中的函数：

在store中mutations或actions实现函数：

• 函数参数context用于传递API，data用于传递自定义信息：
  

组件中useStore().dispatch()调用函数：

• useStore().dispatch(“vuex中的函数名”，{对象参数})
  

查看前端调用vuex函数效果：

• API网址：https://app165.acapp.acwing.com.cn/api/token/
  这个用于获取JWT令牌和公钥的网址有点不靠谱…
• 如果你运气比较好，点击一次登录按钮就能在控制台看到一条refresh和access：
  
• 如果你运气不好，可能和我一样，一直显示浏览器CORS禁止跨域：
  
• 如果你一天一直CORS禁止跨域，不妨尝试将用户名密码设置简单一些，直接123123。而且不要让浏览帮你用历史记录填写用户名和密码
• 但是其实这一步能不能看到含有refresh和access的reps无所谓，不影响下面

2, jwt_decode(JWT令牌)解码：

• 用户信息在登录时存储到了resp中的JWT令牌中，我们需要安装对resp解码的包：
  
• 在login函数中调用jwt_decode()函数解码jwt令牌：
  
• 前端查看解码结果：用户名密码最好简单一些
  

3, 获取登录时提交的用户信息：

• ajax调用已有的API：https://app165.acapp.acwing.com.cn/myspace/getinfo/，来获取登录用户的详细信息：

• 前端查看用户登录的信息：
  

4, 更新登录后的Vuex全局变量：

确定全局变量该有的属性：

• 确定我们登录后要使用的用户信息，全部以属性加入到全局变量对象中：
  

配套同步函数修改全局变量

• 在mutations中构建专门用于修改变量值的同步函数
  

调用API为全局变量提供数据

• ajax调用API获取登录时提交给JWT的信息：https://app165.acapp.acwing.com.cn/myspace/getinfo/

  cotext.commit(调用mutations中的函数名)，对，下图中不小心多打了个m
  

• 前端网页登录，查看是否将登录信息成功传递给vuex全局变量：
  

• 如果获取JWT就失败，也应该回调登录页面设置的报错函数：
  

4, 定时刷新登录access：

• 定期刷新access的方法有两种：一种是每次请求都检查一下access是否过期，还有一种不经过访问时间到了就刷新
• 本项目采用第二种，而且由于一个access本身保留时长5min，为了避免边界情况，我们每次4min30s就刷新
• 刷新JWT的API：https://app165.acapp.acwing.com.cn/api/token/refresh/
• 先设置刷新时间1s，查看网页反应：
  
• 现在更新Vuex中全局变量的refresh变量：
  

5. 登录成功后网页跳转：

• 使用router.push(name:‘组件名’);跳转到目标页面：
  

• 前端网页查看效果：
  先输入一个JWT中错误的密码看看：
  

• 再输入JWT中正确的密码：
  

• 可能有人好奇，没注册是怎么登录的？
  我们单纯获取JWT的API没有设置验证，但是调用获取JWT中的用户登录信息API设置了验证
  我们在没有获取登录信息时已经为用户名123密码123注册了JWT和公钥
  之后的验证和刷新都是用户名密码不变，赋予新的私钥，计算新的公钥
  也就是说在未设置验证的时候我们已经产生了私钥和公钥，且之后验证或者刷新access时也只改变私钥和公钥，我们只负责正确的用户名密码即可

2. 导航栏组件：

1. 登录成功显示用户名和退出：

存储信息到vuex：

• 先useStore().dispatch(“actions”.{参数对象})，再context.commit(“mutations”)来将数据存储到vuex中
• 也可以直接useStore.commit(“matations中函数”,{参数对象});来直接存储

取出vuex中信息：

• 组件在<\temple>和<\script>部分中，直接使用**$store.state.对象.属性**，来取出vuex中的值

为NavBar添加v-if：

• 登录成功后导航栏从”登录+注册“，变为”用户名+退出“，这用到了vue提供的v-if & v-else：
  

实现退出功能：

• JWT维护登录机制 和 Session维护登录机制有很大不同：

  前者自己销毁获得的JWT令牌即可，后者要把useid一项从数据库删除

  也就是前者退出登录无需访问服务器，后者需要访问服务器

• 现在为退出标签绑定撕毁JWT令牌即修改vuex全局变量的事件函数即可：
  

• 查看网页点击退出后的反应：