关于获取用户信息的字段能重写吗，，我总是报错

[Ambitionsqy]

我自己研究了两天都没弄明白，就是关于获取用户信息接口那里，我可以用自己写的字段么。 这是花裤衩大大写的关于用户信息的每个字段

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

我想改成自己的，那需要修改哪几个地方。。。

这是store/modules/user
const state = {
  token:getToken(),
  admin_id:cookdata.admin_id,
  login_time:cookdata.login_time,
  username:cookdata.username,
}
const mutations = {
  SET_ADMINID: (state, admin_id) => {
    state.admin_id = admin_id
  },
  SET_USERNAME: (state, username) => {
    state.username = username
  },
  SET_LOGINTIME: (state, login_time) => {
    state.login_time = login_time
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
}
const { admin_id, username, login_time, token } = dataInfor 
        commit('SET_TOKEN', token);
        commit('SET_ADMINID', admin_id);
        commit('SET_USERNAME', username)
        commit('SET_LOGINTIME', login_time)

这是getters.js   
  admin_id: state => state.user.admin_id,
  login_time: state => state.user.login_time,
  username: state => state.user.username,

[Ambitionsqy]

[Ambitionsqy]

这是info接口

getInfo({ commit, state }) {
  const admin_ids= state.admin_id
  const tokens=state.token
  return new Promise((resolve, reject) => {
    getInfo({admin_id:admin_ids,token:tokens}).then(response => {
      const dataInfor = JSON.parse(JSON.stringify(state));
      // const data= {
      //   roles: ['admin'],
      //   introduction: 'I am a super administrator',
      //   avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      //   name: 'Super Admin'
      // }
      if (!dataInfor) {
        reject('验证失败，请重新登录!')
      }
      // const { roles, name, avatar, introduction } = data
     
      const { admin_id, username, login_time, token } = dataInfor 
      commit('SET_TOKEN', token);
      commit('SET_ADMINID', admin_id);
      commit('SET_USERNAME', username)
      commit('SET_LOGINTIME', login_time)
      // commit('SET_ROLES', roles)
      // commit('SET_NAME', name)
      // commit('SET_AVATAR', avatar)
      // commit('SET_INTRODUCTION', introduction)
      resolve(dataInfor)
      // resolve(data)
    }).catch(error => { 
      reject(error)
    })
  })
},

[pan-lj]

请问问题解决了吗，我也报同样的错

[spengjie]

作为初学Vue时曾经被这个问题所困扰过的一员，今天无意中发现还是有很多人仍然被这个问题所困扰着。所以决定对这个问题进行下详细的分析拆解，以便让后续遇到这个问题的人能够直接定位并修改问题。具体见下。

问题现象

登录时报错，见上面的截图。主要是：

> vue.runtime.esm.js?2b0e:619 [Vue warn]: data functions should return an object:
> Property "visible" must be accessed with "$data.visible" because properties starting with "$" or "_" are not proxied in the Vue instance to prevent conflicts with Vue internalsSee:

这里摘录成文字，主要是为了方面后续查找这个问题时能够搜索到。

问题分析

这个问题主要还是报错内容和实际原因关联性不强，所以才难以定位的。

// src\permission.js
// 从第37行起
          const { roles } = await store.dispatch('user/getInfo')  // 自己写的user/getInfo的返回结果中不包含roles，导致roles的值是undefined。

          // generate accessible routes map based on roles
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)  // 进入 src\store\modules\permission.js 第50行。

// src\store\modules\permission.js
// 从第49行起
const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {  // 由于roles的值是undefined，这里会报错。进入 src\permission.js 第48行的异常处理分支。
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

// src\permission.js
// 从第48行起
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')  // 这里的error是一个Error对象，不是一个字符串。Message.error会将其当做Vue组件的data，导致出现问题现象中的报错。
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }

解决方案

1. 在user/getInfo的返回结果中包含roles或其他自己定义的变量。
2. 将 src\permission.js 第51行的

Message.error(error || 'Has Error')

修改为

Message.error(error.message || 'Has Error')

或者

Message.error({ message: error } || 'Has Error')

也就是说，Message.error的第一个参数要么是一个字符串，要么是一个设置Message属性的Object。不能是其他Object。 这样修改了之后，即时再报错，也能够清晰地展示出是什么错误了。

相关问题

#1501 #2026 #2469 #2602

扩展阅读：为什么Message.error的第一个参数是Error对象会报错

参见element-ui的相关源码，仅摘录关键部分

\\ packages\message\src\main.js
import Main from './main.vue';
let MessageConstructor = Vue.extend(Main);

const Message = function(options) {
  if (Vue.prototype.$isServer) return;
  options = options || {};
  if (typeof options === 'string') {
    options = {
      message: options
    };
  }
  instance = new MessageConstructor({
    data: options  // 将options作为了MessageConstructor的data。
  });
  instance.id = id;
  if (isVNode(instance.message)) {
    instance.$slots.default = [instance.message];
    instance.message = null;
  }
  instance.$mount();
  document.body.appendChild(instance.$el);
  let verticalOffset = options.offset || 20;
  instances.forEach(item => {
    verticalOffset += item.$el.offsetHeight + 16;
  });
  instance.verticalOffset = verticalOffset;
  instance.visible = true;
  instance.$el.style.zIndex = PopupManager.nextZIndex();
  instances.push(instance);
  return instance;
};

['success', 'warning', 'info', 'error'].forEach(type => {
  Message[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      };
    }
    options.type = type;
    return Message(options);  // 如果Message.error的参数options不是字符串类型，就直接将其传给Message了。
  };
});

[Qroxyquan]

good!

[JohnParken]

good

[15378214096]

good!