1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/thousmile-vue-admin-template

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Это зеркальный репозиторий, синхронизируется ежедневно с исходного репозитория.
Клонировать/Скачать
vue.md 4.6 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 4 месяцев назад 0643512

Данный фрагмент написан на языке JavaScript.

Promise((resolve, reject) => { login(username, userInfo.password).then(res => { setToken(res.data); commit('SET_TOKEN', res.data); resolve(); }).catch(error => { reject(error); }); }),

// 获取用户信息 GetInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo(state.token).then(res => { const data = res.data; if (data.roles && data.roles.length > 0) { // 验证返回的 roles 是否是一个非空数组 commit('SET_ROLES', data.roles); } else { reject('getInfo: roles must be a non-null array !'); } commit('SET_MENUS', data.menus); commit('SET_BUTTONS', data.buttons); // 设置用户信息 commit('SET_INFO', data); resolve(res); }).catch(error => { reject(error); }); }); },

// 登出 LogOut({ commit, state }) { return new Promise((resolve, reject) => { logout(state.token).then(() => { commit('SET_INFO', ''); commit('SET_TOKEN', ''); commit('SET_ROLES', []); removeToken(); resolve(); }).catch(error => { reject(error); }); }); },

// 前端 登出 FedLogOut({ commit }) { return new Promise(resolve => { commit('SET_TOKEN', ''); removeToken(); resolve(); }); }


**Этот фрагмент представляет собой код на JavaScript, который описывает функции для работы с аутентификацией и авторизацией пользователей.**

*Promise* — это объект, который позволяет выполнять асинхронные операции и получать их результаты. В данном фрагменте *Promise* используется для выполнения асинхронной операции входа в систему.

Функция *login* выполняет вход в систему и возвращает обещание (*Promise*), которое будет выполнено после успешного входа или отклонено в случае ошибки. Если вход выполнен успешно, то функция *setToken* устанавливает токен доступа, а функция *commit* сохраняет данные о пользователе в хранилище.

Функции *GetInfo*, *LogOut* и *FedLogOut* выполняют аналогичные действия для получения информации о пользователе, выхода из системы и удаления токена соответственно. ### До сих пор реализовано динамическое меню, осталось только реализовать права на кнопки, это довольно просто, достаточно добавить одну директиву Vue

```javascript
import Vue from 'vue'
import store from '@/store'

/** 权限指令**/

Vue.directive('has', {
  bind: function(el, binding) {
    if (!Vue.prototype.$_has(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

// 权限检查方法
Vue.prototype.$_has = function(value) {
  // Получить пользовательские права кнопок
  let isExist = false
  const dynamicButtons = store.getters.buttons
  if (dynamicButtons === undefined || dynamicButtons === null || dynamicButtons.length < 1) {
    return isExist
  }
  dynamicButtons.forEach(button => {
    if (button.resources === value) {
      isExist = true
      return isExist
    }
  })
  return isExist
}

Протестируем работу директивы на странице

<!-- Значение v-has — это значение resources атрибута buttons при получении информации о пользователе. Проводим сравнение -->

<el-button v-has="'perm:new'" class="btns">Добавить</el-button>

<el-button v-has="'perm:haha'" class="btns">Хаха</el-button>

На этом этапе мы завершили интеграцию spring boot, security, jwt и vue-admin-template. Реализована классификация полного стека, динамические права доступа и контроль над кнопками в бэкенд-системе управления.

Богатые братья поддерживают деньгами, а бедные — аплодисментами.

Комментарий ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://gitlife.ru/oschina-mirror/thousmile-vue-admin-template.git
git@gitlife.ru:oschina-mirror/thousmile-vue-admin-template.git
oschina-mirror
thousmile-vue-admin-template
thousmile-vue-admin-template
master