Nesta seção, focaremos na integração do componente de dropdown para informações do usuário, encluindo funcionalidades como navegação e logout. O layout segue o modelo do código-fonte de referência, com o dropdown usando o componente ElDropdown. As ações incluem links para a página inicial e perfil do usuário, além de um link externo. O logout é tratado através do evento nativo @click.native no item do dropdown. O método de logout no componente NavBar é simplificado para despachar a ação e rediercionar:

methods: {
  async handleLogout() {
    await this.$store.dispatch('user/endSession');
    this.$router.push(`/auth/login?redirect=${this.$route.fullPath}`);
  }
}

No módulo Vuex do usuário, adicionamos a ação endSession para limpar o estado e tokens. Essa ação utiliza uma chamada API e limpa as credenciais armazenadas:

endSession({ commit, state }) {
  return new Promise((resolve, reject) => {
    callSignOutApi(state.session.token)
      .then(() => {
        commit('RESET_TOKEN');
        commit('ERASE_ROLES');
        clearStoredToken();
        updateRouter();
        resolve();
      })
      .catch(err => reject(err));
  });
},

A API para logout é definida no arquivo de serviços, enviando o token para o endpoint:

export function callSignOutApi(authToken) {
  return request({
    url: '/api/auth/sign-out',
    method: 'POST',
    data: { token: authToken }
  });
}

Para testes, configuramos dados mockados em um arquivo separado, com informações de usuários simulados. Cada usuário tem credenciais, roles e avatar:

const mockUsers = {
  usersData: {
    adminUser: {
      username: 'adminUser',
      password: 'secure123',
      token: 'TKN_ADM',
      permissions: ['admin'],
      profileImage: 'https://example.com/admin-avatar.png'
    },
    regularUser: {
      username: 'regularUser',
      password: 'user456',
      token: 'TKN_USR',
      permissions: ['user'],
      profileImage: 'https://example.com/user-avatar.gif'
    },
    guestUser: {
      username: 'guestUser',
      password: 'guest789',
      token: 'TKN_GST',
      permissions: ['guest'],
      profileImage: 'https://example.com/guest-avatar.gif'
    }
  }
};

module.exports = mockUsers;

O mock para a API de logout verifica o token e retorna uma mensagem de sucesso. A implementação usa CommonJS para compatibilidade com Node.js:

function processSignOut(req) {
  const reqMethod = req.method;
  let { token } = req.body;
  let response = null;
  const allUsers = require('./mockUsers').usersData;
  if (reqMethod === 'POST') {
    for (let key in allUsers) {
      if (allUsers[key] && allUsers[key].token === token) {
        response = {
          message: allUsers[key].username + ' saiu com sucesso',
          data: { token: token }
        };
        break;
      }
    }
    if (!response) {
      response = {
        message: 'Sessão encerrada',
        data: { token: token }
      };
    }
  } else {
    response = null;
  }
  return response;
}

module.exports = processSignOut;

Essas implementações demonstram a adição de funcionalidades de dropdown e autenticação no vue-element-admin, mantendo a modulariddae e clareza no código.