Слияние кода завершено, страница обновится автоматически
Данный фрагмент написан на языке 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 )