vue-admin-template之右上角logo换成自定义照片

vue-admin-template之右上角logo换成自定义照片

关于这个照片我是写成了静态的，其实也可以用户自己上传，展示的时候从数据库中查找出路径并赋值给avatar即可;
头像显示主要是在这个文件当中：

E:\study\vscode\bcms\bcms-admin\src\layout\components\Navbar.vue

        <div class="avatar-wrapper">
          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
          <i class="el-icon-caret-bottom" />
        </div>

我们需要做的就是在这个路径的文件E:\study\vscode\bcms\bcms-admin\src\store\modules\user.js中给avatar设置默认照片地址，
代码：

const getDefaultState = () => {
  return {
    token: getToken(),
    username: '',
    compname: '',
    avatar: require('@/assets/beef_logo1.png')  // 使用Webpack解析路径
  };
};

设置默认值后要注释下面的赋值，防止被修改：

        //commit('SET_AVATAR', avatar);

import { login, logout, getInfo } from '@/api/user';
import { getToken, setToken, removeToken } from '@/utils/auth';
import { resetRouter } from '@/router';

const getDefaultState = () => {
  return {
    token: getToken(),
    username: '',
    compname: '',
    avatar: require('@/assets/beef_logo1.png')  // 使用Webpack解析路径
  };
};

const state = getDefaultState();

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState());
  },
  SET_TOKEN: (state, token) => {
    state.token = token;
  },
  SET_USERNAME: (state, username) => {
    state.username = username;
  },
  SET_COMPNAME: (state, compname) => {
    state.compname = compname;
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar;
  }
};

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo;
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password }).then(response => {
        const { data } = response;
        commit('SET_TOKEN', data.token);
        setToken(data.token);
        resolve();
      }).catch(error => {
        reject(error);
      });
    });
  },
//   {//getInfo的返回值
//     "code": 200,
//     "message": "success",
//     "data": {
//         "compname": "青海西宁牛场00",
//         "username": "admin"
//     }
// }
  // get user info,这里获取用户信息
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response;

        if (!data) {
          return reject('Verification failed, please Login again.');
        }

        // 获取 username 和 compname 信息
        //把data中的这两个属性赋值到他本身
        const { username, compname } = data; 

        commit('SET_USERNAME', username);
        commit('SET_COMPNAME', compname);
        // 不再更新avatar
        //commit('SET_AVATAR', avatar);
        resolve(data);
      }).catch(error => {
        reject(error);
      });
    });
  },

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken(); // must remove  token  first
        resetRouter();
        commit('RESET_STATE');
        resolve();
      }).catch(error => {
        reject(error);
      });
    });
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      removeToken(); // must remove  token  first
      commit('RESET_STATE');
      resolve();
    });
  },
  // reset state
  resetState({ commit }) {
    return new Promise(resolve => {
      commit('RESET_STATE');
      resolve();
    });
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};