【vue-admin-template】 Login事件的调取过程

1、解读Login

   handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }

2、查找store中的login　　在store>modules>user.js 找到

// 登录
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        login(username, userInfo.password).then(response => {
          const data = response.data
          setToken(data.token)
          commit('SET_TOKEN', data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

3、store>modules>user.js 引入了外部方法
import { login, logout, getInfo } from ‘@/api/login’
import { getToken, setToken, removeToken } from ‘@/utils/auth’

api>user.js 这里是实际的接口调用方法

export function login(username, password)
{
 return request({
    // 页面登陆方法
    // data是传入参数，返回什么数据
    url: '/login', //实际调用的webapi接口方法
    method: 'get',
    params
  })
} 

4，可以看出这个模板的好处，当我们进行二次开发时，只需增加一个后端接口，用于身份验证。
步骤：

1.前端调用接口将用户名和密码传入后端
2.后端通过用户名在数据库中查询密码是否正确，正确则返回一个token
3.前端接收token，并将token保存在cookie中

保存token的方法也做了封装，作为一个工具类，utils->auth.js