vue-element-admin登录模块所踩的坑（登录请求真实数据）

前言

公司开发的项目前台选用了vue-element-template简单模板做二次开发，后台用的SpringBoot+Hibernate。话不多说，让我们直接进入登录模块。简单来说就是不再使用mock假数据，去后台请求真实的数据。

后台接口

这里是controller层的接口：
http://localhost:9001/login/loginByPhone。。。

@RestController
@RequestMapping("/login")
@CrossOrigin
public class SysLoginController {
	@Autowired
	private SysUserService userService;

	@RequestMapping(value="/loginByPhone",method=RequestMethod.POST)
	public Object findByUsernameAndPassword(@RequestBody Map<String,Object> loginInfo) {
		String username = (String) loginInfo.get("username");
		String password = (String) loginInfo.get("password");
		User result = userService.findByUsernameAndPassword(username, password);
		String token = UUID.randomUUID().toString().replace("-", "");
		Map<String,Object> result1 = new HashMap<>();
		result1.put("user", result);
		result1.put("token", token);
		if(result.getId() != null) {
			return result1;
		}else {
			return AjaxObject.newError("登录失败！").toString();
		}
	}

vue-element-template

登录流程

*1.src/view/login/index.vue页面文件中，其他的根据自己的需求做更改，点击登录时会进到handleLogin()方法中。

handleLogin() {
      var _this = this
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          _this.$store.dispatch('user/Login', _this.loginForm).then(() => { // user/login这是store目录下的一个方法
            _this.$router.push({ path: this.redirect || '/' })
          }).catch(function(error) {
            _this.$message.error('登录失败，请检查用户名或密码!')
            console.log(error)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

_this.$store.dispatch(‘user/Login’, _this.loginForm)这句代码将会带我们进入流程的第二步。
2.src/store/modules/user.js
_this.store.dispatch(‘user/Login’, _this.loginForm)，会到src/store/modules/user.js中请求Login方法。

// user Login自定义
  Login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      Login({ username: username.trim(), password: password }).then(response => {
        commit('SET_NAME', response.user.username)
        // 储存username,刷新页面时调用
        sessionStorage.setItem("username", JSON.stringify(response.user.username))
        sessionStorage.setItem("type", JSON.stringify(response.user.type))
        commit('SET_TYPE', response.user.type)
        commit('SET_TOKEN', response.token)
        setToken(response.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

注意：Login是我自己定义的方法，需要在这个文件的第一行，把Login从’@/api/user’导进来

import { Login, logout, getUserInfo } from '@/api/user'

断点跟踪的话，你会发现参数 userInfo，就是_this.store.dispatch(‘user/Login’, _this.loginForm)中传递过来的参数。
这个方法中又去调用Login方法，（教你个快捷键–按住Ctrl点击Login方法会进到该方法中去）
3.src/api/user.js
这个模板中所有的请求都放在了api这个目录下，直接看Login方法，这里的data就是登录时你在输入框中输入的用户名跟密码。

/* 自定义，访问后台接口 */
export function Login(data) {
  return request({
    url: 'http://localhost:9001/login/loginByPhone',
    method: 'post',
    data
  })
}

到这里还没完哦，马上走完了，Login方法中去返回一个request…同样的方法，Ctrl点击，会发现它会走到下一步。

4.src/utils/request.js
这个里面才决定你是否成功登录的关键

import axios from 'axios'
/* import { MessageBox, Message } from 'element-ui' */
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
  timeout: 500000 // request timeout
})

service.interceptors.request.use(
  config => {

    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)


service.interceptors.response.use(
  response => {
    const res = response.data
    console.info(res)
    if (res.token === null) {
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

它自己定义了一些返回的code，比如20000、50008、 50012 、50014，要把这些都改掉。我是根据用户名跟密码去请求后台数据，查到数据的同时会生成一个token，所以if条件中：if (res.token === null) {。。。}，它肯定是true，会去执行相关代码。
const res = response.data
console.info(res)
可以进入调试模式，查看从后台返回的数据是什么东西。
在请求的超时时间 timeout: 500000

结束语

到此，登录模块就已实现从后后请求真实的数据。欢迎各位大佬指正！