新手入门vue-element-admin框架（三）：实例：支持后台的登录功能改造

前言：

（一）环境配置：https://blog.csdn.net/StellaXiao98/article/details/116790478?spm=1001.2014.3001.5502

（二）vue-element-admin简介及安装：https://blog.csdn.net/StellaXiao98/article/details/116791368?spm=1001.2014.3001.5502

 

第三部分  实例：实现登录页面

本文将介绍vue-element-admin框架中登录功能的流程和如何将登录功能接入后台，最后还介绍了对vue-admin-template的改造方式。

 

案例描述：前后端分离的开发，后端提供固定的接口，前端依据自己需求，对现有框架进行修改，并接入后台。

 

（一）vue-element-admin 框架中的登录流程

• src/main.js：入口js文件，注册全局组件（Vue、Cookie、Element、store、router等），渲染App组件到页面。
• App.vue：定义全局，显示路由组件，缺省：/
• /src/views/login/index.vue中找到login按键，找到其对应点击事件“handleLogin()”。

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

• 该方法中的dispatch操作，调用了src/store/modules/user中的login方法，传递userInfo，见下。

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        console.info('get login info:', data)
        commit('SET_TOKEN', data)
        setToken(data)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

setToken&#x