iview admin二次开发，前后端分离下修改登录功能

背景

前后端分离：通过axios从后台获取json数据
在iview admin基础上修改
因为自己没在网上看到在此背景下的教程，所以自己来写一篇。可能会有缺陷，还望大家指导。
目前只做了登录，并没有做权限。做了以后会再写一篇的。
跨域问题不在这里详述，我是通过后端配置解决的
主要参考了这两篇博文
vue.js+iview+springboot搭建一个前后端分离登陆demo
记将iview-admin改造成自己的后台管理系统

我更新了权限的部分：
iview admin二次开发，前后端分离下修改权限功能

首先要知道

整个iview admin登录的流程，这里放一篇大佬的博文，至少要知道如何运转的对吧。

Login功能流程逻辑

以下红色的地方需要更改，黄色的地方是提示

第一步

先修改baseUrl中的dev
这里需要说明一下：我是从后端获取数据的，前端使用的是8080端口，后端使用的是8181端口。
路径：src\config\index.js
然后注释掉
路径：src\main.js

第二步

下面按照流程顺序挨个修改文件
进入登录界面首先是通过表单：src\components\login-form\login-form.vue
这里因为我的数据需使用loginname作为用户名登录所以我把所有原本的userName都修改为了loginname
此处的loginname应该是要与后端实体类中的对应数据名字一致才可以，我不确定。感兴趣的小伙伴可以试试不一致会怎样。
我后端的密码实体也是password一样我就没有修改



上图中form中的值只是刚进入页面默认框框里显示的值，最后是都要设置为空的，但为了开发方便我就填入了用户名，省的每次都要输入一遍用户名。
这时点击登录到handleSubmit方法
进入：src\view\login\login.vue
首先在页面中加入一个提示用户名或密码错误的信息框
上一个文件中iview admin自带判断为空，这里我就判断一下用户名是否存与密码是否正确，这里交给后端来做，我先说明一下此提示框的作用，具体步骤往下看。

这里导入的东西是token是从后面的步骤中传过来的后面会说到。
如果我们登陆成功获取到了token这是flag为false，如果没获取到说明登录失败flag为true显示我们刚刚加入的错误提示。

进入handleSubmit方法
这是我们看到他使用了handleLogin方法，他传递了刚才用户输入的用户名和密码
进入：src\store\module\user.js

这里我们可以看到他进入了login方法
进入：src\api\user.js

这里的url是与你刚才写的dev拼接起来的，我的最后他就会请求http://localhost:8181/user/login到我的后端控制器中/user/login


这里先获取从前端传过来的用户输入的用户名密码，然后定义一个字符串p为按照用户名去搜索对应用户的密码
findByxx这个方法我就不写了，我用的ssm框架集，每个人可能不一样，最后效果一样即可
先判断是否有这个用户，如果有则判断用户输入的密码跟我们findBy查到的密码是否一致
如果一致设置user中的token字段为用户名（我直接在实体里给User加了一个字段，数据库里没加）
如果不一致，设置token为空
如果没有这个用户则设置token为空
最后返回给前端user
（为什么要设置token为用户名呢，我也不是很了解，我这么做的原因是在没修改登录功能之前，我打印了原本返回的token，好像是用mock，我不是很清楚，它就返回了一个只含token字段的数组，token的值为刚才输入的用户名）

这里从后端获取数据就可以看到了，user中有用户名，密码，token的值
commit(‘setToken’, data.token)设置token的值
然后我就很好奇这个setToken如何传递的token，ctrl+shift+f全局搜索setToken
找到了src\libs\util.js

又找到了src\router\index.js


这里我就寻思，它能这么用，那我也能这么用。
于是我就将之前login.vue文件中的“用户名或密码错误”的提示信息根据token的值来判断了。如果token存在则不显示提示框，token不存在则显示。而我们知道后端已经根据数据是否有效对token进行了修改，所以就可以判断了。
为何输入错误的密码不跳转呢，应该也是上图的功劳

第三步

登出
src\store\module\user.js
我直接没有调用接口，前端设置token为空就可以了

完成以上步骤基本可以完成登录功能了，如有问题给我留言，因为我也是昨天做的了，试验了好多次，可能会遗漏一些细节。