vue-element-admin用户登录流程

1.vue-element-ui简介

---

vue-element-ui集成了vue和element-ui框架。 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件。

2.使用token作为用户凭证

---

vue-element-ui使用了token作为用户的登录凭证。token是在服务端产生的用户凭证，产生的token交给前端的用户。基于token的用户验证是无状态的，服务端产生的token本身包含了用户信息。用户每次发送请求到服务端的时候都会携带token信息，在服务端验证后进行操作返回数据。token应该在请求的头部发送，以便实现http请求的无状态。在vue-element-admin中，发送请求是请求头部中的x-token携带了token信息。

3.登录流程介绍

---

打开src/views/login/index.vue,可以看到登录按钮绑定了handlelogin函数

  this.$store.dispatch('user/login', this.loginForm)//store/modules/user.js有login方法
            .then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            })
            .catch(error => {
              this.$message({
                showClose: true,
                message: error.message,
                type: 'error'
              })
              this.loading = false
              this.getCode()
            })

调用了store/modules/user.js的login方法。看看这个方法有什么

login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ userName: username.trim(), password: password }).then(response => {//ESLINT简写方法，response为后台的ajax数据
        console.log(response)
        const data=response
        if(data.token==''){
          if(data.erinfo==='wrong password'){
            throw new Error('密码错误')
          }
          if(data.erinfo==='user not exist'){
            throw new Error('用户名不存在')
          }
        }
        commit('SET_TOKEN', data.token)
        setToken(data.token)//接受后台数据中的token，否则就抛出异常
        resolve()
      }).catch(error => {
        reject(error)
        console.log('k')
        console.log(error)
      })
    })
  },

可以看到登录界面绑定的表单值username(用户名)和password(密码)在这里作为参数。但是我们可以看到这里又调用了一个函数login()，这个函数又是哪里来的 ? store的user.js第一行导入了api下的user.js定义的login方法，这个login方法就是从这里定义的。

import { login, logout, getInfo } from '@/api/user'

打开api下的user.js。api下的js文件提供了vue访问服务端的方法，这些方法导入了request.js包装好的axios实例。因此只需要定义访问服务端资源的请求路径以及请求方式的类型和参数就可以访问服务端的资源。我们可以修改login方法让他访问服务端。例如：

export function login(data) {
  return request({
    url: '/web/user/confirm',//访问后台controller层
    method: 'post',
    data:data
  })
}

后台controller层的对应方法(使用springMVC)

@PostMapping(value = "/confirm")
@ResponseBody
public Map<String, Object> confirm(@RequestBody User user) {
	Map <String,Object>map = new HashMap<String, Object>();
	User userdb=this.userManager.findByUserName(user.getUserName());
	if(userdb==null) {
		map.put("token", "");
		map.put("erinfo","user not exist");
		return map;
	}
	else if(!userdb.getPassword().equals(encryptPassword(userdb.getSecret(), user.getPassword()))) {
		map.put("token", "");
		map.put("erinfo", "wrong password");
		return map;
	}
	String token = TokenUtil.generateToken(user.getUserName(), user.getPassword());
	map.put("token", token);
	return map;
	}

前文提到的token就是在这里生成的，这里使用json web token。返回的token将会被vuex储存到cookie里。如果后台验证成功，返回的JSON数据会先交给store/user.js中被导入的login方法处理，如果得到的token不为空，则设置该token为用户的凭证，之后的请求都会用到这个token。如果为空，则抛出异常。抛出的异常在store/user.js下的login方法再抛出到index.vue下的方法。
回到views下的index.vue中的handlelogin。看到代码可以知道如果登录验证通过(调用的没有抛出异常)，则进行路由跳转。否则页面提示错误信息(没有通过后端的验证)。这样就完成了一次登录流程，用户通过验证后就可以浏览页面了。