vue-admin-template 登录接口 接口传递用户数据

-------登录

登录代码为views/login/index.vue，根据自身情况，不需要用户名、密码验证，可删除const validateUsername、validatePassword、loginRules等，输入用户名密码确认后会执行

this.$store.dispatch('user/login', this.loginForm)

该段代码调用src/store/modules/user.js的第一个login

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

第二个login是import { login, logout, getInfo } from '@/api/user'，根据这段代码打开src/api/user.js,这里面的export function login即最终的login函数，可根据自己需要，调用不同的接口。

更改接口后，可能还是会登上，刷新又会报错，因为这个账户没有token，所以还需要设置用户的token，用户的token与用户一一绑定在mock/user.js中。

-------返回后台用户数据

想返回后台数据，可借鉴permission.js中的store.dispatch('user/getInfo')这段代码，在需要引入的地方使用this.$store.state或者this.$store.dispatch('user/getInfo')，用console.log或者alert调试，一般这两个命令都输出不了我们想要的用户名，this.$store.state是因为在第一次登陆后，第二次浏览器会先去mock/user.js找token，接着再根据所找的token采用modules/user.js中的SET_NAME,SET_AVATAR等赋值，现在赋的值就是原来默认token对应的name、roles、avatar值，所以每次刷新浏览器就会发现用户名变成admin或者Super Admin，用this.$store.dispatch('user/getInfo')则会返回Promise对象，这个我也解释不清楚，根据参考【https://www.jianshu.com/p/3c00970841c5】【https://segmentfault.com/a/1190000020980101】写代码执行获取数据，也获取不了想要的结果，因为还是会根据默认token找对应的name，roles。

想返回登录用户的name最终想了两个办法来解决，第一个是再/mock/user.js里的const users里根据自己需要添加token

const users = {
  'admin-token': {
    roles: ['admin'],
    introduction: 'I am a super administrator',
    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
    name: 'Super Admin'
  },

这种的弊端就是创建多少个用户就得添加多少个token，因为你想返回用户的name，而每个name是唯一的。第二种方法：上面不是说我们去改登录接口嘛，这里我们就在/api/user.js修改getInfo(token)接口

export function getInfo(token) {
  return request({
    url: '/vue-admin-template/user/info',
    method: 'get',
    params: { token }
  })
}

返回数据具体咋样去modules/user.js里的getInfo({ commit, state }) 里查看，可采用console.log的方式查看，url修改为我们的接口地址，我采用的方式是也是传token回用django构建的接口中，遇到报错Request header field x-token is not allowed by Access-Control-Allow，解决方法【https://blog.csdn.net/jjsmida1/article/details/117135495】，我是采用用户名-token的方式取出用户名并构造返回数据的token。