Разрешения системы управления фоном и идея обработки разрешений vue

Vue.js

Вообще говоря, только в системе управления (за кулисами) (самая ранняя система управления проектами и веб-сайтами на уровне предприятия теперь называется большинством людей системой управления за кулисами). Разрешения делятся на разрешения на уровне функций и разрешения на уровне данных. В этой статье в основном говорится о разрешениях на уровне функций.

1. Объяснение терминов:

разрешениеозначает отсутствие дальнейших объяснений.

  • Разрешения функционального уровня: Указывает, что после входа в систему различных ролей (или пользователей) функции, которые они видят, различаются или функции, которыми можно управлять, отличаются. Идея обработки некоторых систем заключается в том, что функции, которыми нельзя управлять, будут вам вообще не видны; идея обработки некоторых систем заключается в том, что вы можете видеть все функции, но страницы некоторых функций нельзя видно вообще и не может работать. Лично я считаю, что первое лучше.Например:В системе HIS врачи могут назначать лекарства. Медсестра не может.
  • Разрешения на уровне данных: Указывает, что вы можете ввести функцию. но 1. Возможно, вы не сможете увидеть все данные 2. Операция добавления, удаления, изменения и проверки данных, которые вы видите, может быть невозможна.Например:В системе 0A вы можете видеть только свои собственные данные о посещаемости, и вы не можете добавлять, изменять или удалять их. Однако Miss HR может видеть все данные о посещаемости, а также может выполнять такие операции, как изменение.

2. Идея обработки разрешений (функционального уровня) системы фонового управления

1. Эпоха без фронтенда (если фронтендеры не понимают, можете пропустить эту часть)

Эры фронтенда нет, ее можно рассматривать какЭпоха полного стека. На тот момент программист должен был доделать все функции фронтенда и бекенда. Хотя это богатый клиент (front-end), он ничто по сравнению с нынешней эпохой популярности front-end.

Поэтому существуют внутренние программы для обработки разрешений. Внутренняя программа обрабатывает разрешения совместно с базой данных.

Идеи:

1) Вам нужно создать таблицу в базе данных, которая обычно включает в себя:

Таблица функций:Сохраняет все функции системы управления

Таблица ролей:Сохраненная роль всего проекта – это фактически роль в компании, например: генеральный директор, менеджер по маркетингу, специалист по маркетингу, руководитель проекта, программист и т. д.

Таблица соответствия ролей и функций:Это означает, что какая роль имеет какую функцию.

пользовательская таблица:Все пользователи, которые могут войти в систему управления, сохранят свои роли в таблице пользователей. Этот

В этом случае существует связь между пользователем и функцией

2) (Внутренняя) программа, в соответствии с именем вошедшего в систему пользователя, следует шагам Имя пользователя ---> Роль ---> Функция для получения функции, соответствующей пользователю. Затем достаточно отобразить эти функции в области панели навигации, то есть после авторизации пользователи могут видеть только идеи имеющихся у них функций.

2. Когда преобладает фронтенд:

На данный момент передняя и задняя части разделены. Таким образом, разрешения могут обрабатываться бэкэндом или внешним интерфейсом.

1) Идея серверной обработки разрешений:

Функция входа в систему --> Введите имя пользователя и пароль --> Внешний интерфейс отправляет имя пользователя и пароль --> Серверный модуль получает имя пользователя и пароль --> Поиск базы данных (проверьте имя пользователя и пароль) -- Когда проверка пройдена-->Найти базу данных (имя пользователя и пароль) Имя--->Роль--->Функция)-->Получить функцию пользователя-->Отправить во внешний интерфейс--> Внешний интерфейс циклически отображает функцию в соответствии с полученной функцией.

2) Идея фронтальной обработки разрешений (не рекомендуется):

Прежде всего, вам нужно сохранить разрешения во внешнем интерфейсе, которые будут жестко запрограммированы. Итак, не рекомендуется. Вот идея:

Функция входа в систему --> Введите имя пользователя и пароль --> Внешний интерфейс отправляет имя пользователя и пароль --> Задний интерфейс получает имя пользователя и пароль --> Поиск базы данных (подтвердите имя пользователя и пароль) -- -Когда проверка пройдена --> Вернитесь к интерфейсу (одновременно вернитесь к роли) --> Интерфейс отображает соответствующую функцию в соответствии с разрешением функции, соответствующим роли.

3. Используйте vue для завершения (функционального уровня) разрешений системы фонового управления:

Здесь мы по-прежнему используем идею «разрешений на внутреннюю обработку», а внешний интерфейс отображает только функциональные разрешения в качестве примера для описания.

использоватьvue-routerизaddRoutesдля динамического изменения конфигурации маршрутизации.

1. Шаги

1) Конфигурация маршрутизации по умолчанию содержит только конфигурацию входа в систему.

import Vue from 'vue';
import VueRouter from "vue-router";
import Login from "@/pages/Login";
Vue.use(VueRouter); //把vue-router安装到Vue。
// 创建vue-router对象
let router = new VueRouter({
    mode: "hash", //路由模式
    routes: [{
            path: "/",
            redirect: "/Login"
        },
        {
            path: "/Login",
            component: Login
        }
    ]
});

export default router;

2) После успешного входа серверная часть возвращает функциональные разрешения, предпочтительно напрямую конфигурацию маршрутизации.Если нет, интерфейсная часть обрабатывает функциональные разрешения в формате массива json конфигурации маршрутизации. использоватьvue-routerобъектaddRoutesМетод динамически добавляет конфигурацию маршрутизации в объект маршрутизации. В то же время сохраните конфигурацию маршрутизации вsessionStorage(чтобы предотвратить потерю конфигурации маршрутизации после обновления внешнего интерфейса).

axios({
    url: `/roles`,
    method: "get",
    params: {
        username: this.username,
        userpass: this.userpass
    }
}).then(res => {
    let roles = res.data[0].data;
    //this.allRoutes是所有的路由配置，可以放在vueX中，以下代码是，根据后端返回的权限，产生该用户对应的路由配置
    let currRoutes = this.allRoutes.filter(item => {
        return roles.some(obj => obj.path == item.path);
    });
    //把获取到的权限保存到sessionStorage中
    sessionStorage.setItem("roles", JSON.stringify(roles));
    //把获取到的权限，动态增加到vue-Router对象里
    this.$router.addRoutes(currRoutes);
    this.$router.push("/Home");
});

3), внешний интерфейс находится в "App.vue"created, надо читатьcookieв илиsessionStorageКонфигурация маршрутизации, сохраненная в файле , также необходимо прочитать конфигурацию маршрутизации, использоватьvue-routerобъектaddRoutesМетод динамически добавляет конфигурацию маршрутизации в объект маршрутизации. Таким образом, когда страница обновляется, здесь можно получить права маршрутизации текущего пользователя.

created() {
    this.roles = JSON.parse(sessionStorage.getItem("roles"));
    if (this.roles) {
        //this.allRoutes是所有的路由配置，可以放在vueX中，以下代码是，根据后端返回的权限，产生该用户对应的路由配置
        let currRoutes = this.allRoutes.filter(item => {
            return this.roles.some(obj => obj.path == item.path);
        });
        this.$router.addRoutes(currRoutes);
    }
}

2. Особое внимание:

Обязательно сохраните полученный массив разрешений вsessionStorage. В противном случае конфигурация маршрутизации будет потеряна при обновлении страницы.

Вышеуказанные шаги проверены и пройдены.

Ниже приведена ссылка на весь сетевой диск с кодом:

Связь:disk.baidu.com/is/1sh l9Jade…Код извлечения: tfxr

Категории