【Abp VNext】实战入门（五）：【5】前端管理界面 vue-element-admin —— 登录获取 Access_Token 优化

前言：

vue-element-admin 自带登录模式中真的有点儿恶心人，为什么恶心人呢，分析一下：

1、接口方式采用axios封装调用没问题：utils/request.js；

2、数据缓存采用vuex插件存储也没有问题：store/moudles/user.js；

恶心就恶心在 它把调用登录接口相关的功能写到了 缓存类user.js中，然后在里面各种Mutations 和 Actions 调用 简单的登录逻辑变得异常复杂化，如下为缓存类中的方法：

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_INTRODUCTION: (state, introduction) => {
    state.introduction = introduction
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  }
}
           

getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response
        if (!data) {
          reject('Verification failed, please Login again.')
        }
        const { roles, name, avatar, introduction } = data
        // roles must be a non-empty array
        if (!roles || roles.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }
        commit('SET_ROLES', roles)
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        commit('SET_INTRODUCTION', introduction)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  }
           

个人理解缓存类就是单纯的缓存数据使用，不做任何业务逻辑功能方面的封装，所以把登录相关的方法及业务剥离出去；

改造思路：

1、根目录api目录中存放接口申明：user.js device.js …

//api/user.js
import request from '@/http/request'
export function Login(data) {
  return request({
    url: '/connect/token',
    method: 'post',
    data: data
    //method: 'get',// 如果是get方法 下面要用 params 接收参数
    //params:data   // 
  })
}
           

2、根目录新增business目录存放一些业务功能封装：user.js device.js

//business/user.js
import Api from '@/api/index'
import Store from '@/store/index'
import { asyncRoutes, constantRoutes } from '@/router'
import router from '@/router'
// 用户登录方法
export const Login = (Input) => {
  // 2个Return配合  外部可采用 $common.BS_User.Login(input).then(res=>{console.log(res)});
  return Api.User.Login(Input).then(Res => {
    // 1、保存token信息 到/store/token.js 中
    SaveTokenInfo(Res)
    // 2、加载并保存用户基础信息：暂时存放 默认信息 后续可二次调用
    LoadAndSaveUserBaseInfo(Res)
    return Res// 返回原始数据 可供外部使用
  })
}
           

3、前端页面调用：

//login/index.vue
const qs = require('qs')// 用于将Json格式数据参数 转x-www-form-urlencoded格式所需参数
//登录参数
	loginForm: {
        username: 'admin',
        password: 'Admin12345*',//初始化默认密码是：1q2w3E*
        client_id: 'GasMonitoring_App',
        client_secret: '1q2w3e*',
        grant_type: 'password'
      }

   //登录方法
   Login() { 
    let tmpInput=qs.stringify(this.loginForm);
	this.$Bussiness.User.Login(tmpInput).then((res) => {
          console.log(res)
        }) 
    }
           

总结：

这样各司其职 有条不紊 再多都不会乱；