Vue和Vue-Element-Admin（四）：vue-element-admin的用户登录集成

Vue-element-admin使用mock.js数据进行用户和权限的验证，使用该框架开发的首要事情就是用户集成改造，使用本地测试环境的用户和角色信息完成登录验证；

目录

 一、vue-element-admin的登录逻辑

二、后端改造--用户查询接口

1、表和model

2、mapper

 3、service和Impi

4、controller

5、filter拦截器 

三、用户登录集成的前端改造

---

 一、vue-element-admin的登录逻辑

在/views/login目录中index.vue是登录界面，SocialSignin.vue是第三方登录页面，auth-redirect.vue没看懂；

login
| components
| | SocialSignin.vue
| auth-redirect.vue
| index.vue

 index.vue中的登录按钮触发handleLogin()这个methods，调用store/user.js中login这个action实现状态的更改，login()这个action再调用api/user/login的接口请求，从后端拿用户数据，如下：

// hadleLogin方法完成用户登录动作
handleLogin() {
      this.$refs.loginForm.va