Система управления фоновыми полномочиями SpringBoot (2) — интерфейсная инженерная конструкция

Создание фоновой структуры разрешений SpringBoot (1) - создание фоновой структуры

Система управления фоновыми полномочиями SpringBoot (2) — интерфейсная инженерная конструкция

Система управления фоновыми разрешениями SpringBoot (3) — модуль разрешений

Система управления фоновыми правами SpringBoot (4) — развертывание

г

工程mountain-element-ui是基于 vue-admin-template扩展的, 主要实现权限管理系统，包括用户管理、
角色管理、部门管理、菜单管理等。实现动态路由加载，树形结构展示、表格数据展示等。

Адрес фронтенд проекта

Адрес бэкэнд-проекта

Каталог проекта Описание

На приведенном выше рисунке перечислены основные каталоги файлов, которые требуют внимания.Прежде чем изучать этот проект, вам необходимо иметь основу vuejs, понимать структуру веб-пакета и использовать клиент vue-cli для создания проекта.

компоненты рамы

страница

страница авторизации
домашняя страница

инструкция

Код vue страницы входа вsrc/views/loginпод дорожкой

Заголовок главной страницы (заголовочный файл) и код страницы боковой панели находятся вsrc/layout/componentsНа этом пути значок в верхнем левом углуSidebarИспользовать на боковой панелиLogo.vueкомпоненты

Компоненты макета страницы: см.src/layout/index.vueкомпоненты

компоненты бизнес-страницы

страница

Управление пользователями
управление ролями
Управление отделом
управление меню

инструкция

код страницы вsrc/views/sys/По пути пользователь: управление пользователями, отдел: управление отделом, роль: управление ролями, меню: управление меню
Все компоненты на странице находятся в элементе пользовательского интерфейса, пожалуйста, проверьтеОфициальный сайт пользовательского интерфейса Element

конфигурация маршрутизации

Конфигурация статической маршрутизации

существуетsrc/router/index.jsВ конфигурации создайте массив route route

export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  }

]

Создайте объект маршрута на основе указанного выше массива.

  const createRouter = () => new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
  })
  
  const router = createRouter()
  
  // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
  export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher // reset router
  }

Добавлена динамическая маршрутизация

Получить данные json конфигурации меню из фонового интерфейса
Преобразование данных меню в данные маршрутизации, доступные во внешнем интерфейсе js.
Динамически добавлять преобразованные данные в маршруты
Основной код выглядит следующим образом:

export function remoteRouter(menuList) {
  const initRouter = getLocalStorage('initRouter')
  router.options.routes = initRouter
  router.addRoutes(router.options.routes)
  const list = getMenuTree(menuList.children)
  // 动态添加路由
  for (let i = 0; i < list.length; i++) {
    var isFlag = router.options.routes.some(function(obj) {
      if (obj.path === list[i].path) {
        return true
      }
    })
    if (!isFlag) {
      router.options.routes.push(list[i])
    }
  }
  router.addRoutes(router.options.routes)
}

Глобальная обработка маршрута

Обрабатывать события перед циклической маршрутизацией:
- Получить кешированный статический маршрут и данные динамического маршрута
- Динамическая маршрутизация Добавить маршрутизацию
- Получите кешированный токен, определите, существует ли токен, и перейдите на страницу входа, если он не существует.

router.beforeEach(async(to, from, next) => {
  const initRouterList = getLocalStorage('initRouter')
  const list = getLocalStorage('router')

  if (router.options.routes.length <= initRouterList.length && list != null) {
    const remoteRouter = menuTreeToPageMenu(list)
    // 动态添加路由
    if (remoteRouter !== null && remoteRouter !== undefined) {
      for (let i = 0; i < remoteRouter.length; i++) {
        var isFlag = router.options.routes.some(function(obj) {
          if (obj.path === remoteRouter[i].path) {
            return true
          }
        })
        if (!isFlag) {
          router.options.routes.push(remoteRouter[i])
        }
      }
      router.addRoutes(router.options.routes)
      next({ ...to, replace: true })
    }
  }

  // start progress bar
  NProgress.start()
  // set page title
  document.title = getPageTitle(to.meta.title)
  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // get user info
          await store.dispatch('user/getInfo')

          next()
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
   // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

доступ к интерфейсу

блочный макет

Поскольку инженер отделен от фронта и бэка, а фронтенд и бэкенд проекты разрабатываются одновременно, я разрешаю междоменный доступ к сервису интерфейса бэкенда, а фронтенд проект не иметь междоменную конфигурацию, при этом mock-интерфейс в оригинальном проекте заблокирован. существуетmain.jsЗакомментируйте фиктивную ссылку следующим образом:

// import { mockXHR } from '../mock'
// if (process.env.NODE_ENV === 'production') {
//   mockXHR()
// }

интерфейс входа/выхода

Когда пользователь входит в систему, после успешного входа в систему сервер возвращает токен в данных и сохраняет токен в глобальном, чтобы параметр токена мог быть передан при доступе к другим интерфейсам. фронтальная подсказка. код находится вsrc/store/modules/user.jsВ файле основной код выглядит следующим образом:

login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        if (response.data.sessionId !== undefined) {
          setCookies('sessionId', response.data.sessionId)
        }
        setLocalStorage('router', response.sysMenus.children)
        remoteRouter(response.sysMenus)
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  }

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

logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        commit('SET_TOKEN', '')
        removeToken()
        resetRouter()
        removeLocalStorage('router')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }

Другие интерфейсы

Инкапсуляция запроса: при запросе внутреннего интерфейса оберните глобальный доступrequest.jsфайл, при запросе интерфейса добавить его в заголовок запросаX-TokenПараметры, основной код выглядит следующим образом:

service.interceptors.request.use(
  config => {
    // do something before request is sent
    const sessionId = getCookies('sessionId')
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    if (sessionId != null && sessionId !== undefined) {
      config.headers['token'] = sessionId
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

Инкапсуляция возврата запроса: после того, как запрос возвращает данные, код возврата глобального решенияcode, если вам нужно сделать глобальное суждение, чтобы судить здесь, основной код выглядит следующим образом:

response => {
    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('您已经注销，您可以取消以停留在此页面，或再次登录', '确认注销', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      if (res.code === 600) {
        Message({
          message: '您没有操作权限',
          type: 'warning',
          duration: 5 * 1000
        })
        return
      }
      const promise = new Promise(function(resolve, reject) {
        reject(new Error(res.message || 'Error'))
      })
      promise.catch(function(error) {
        console.log(error)
      })

      return promise
      // return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
 }

разное

Настроить имя проекта

путь к файлу конфигурации/vue.config.js

publicPath: '/mt',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development'

Настройте адрес доступа к среде

Конфигурация среды разработки: файл конфигурации.env.development
```
VUE_APP_BASE_API = 'http://127.0.0.1:8080/mt'
```
Конфигурация производственной среды: файл конфигурации.env.production
```
VUE_APP_BASE_API = 'http://172.22.112.130:8080/mt'
```

Выполнение заказа

Начало разработки:npm run dev
Команда сборки:npm run build:prod

использованная литература

Официальный сайт пользовательского интерфейса Element
официальный сайт vue-element-admin

продолжение следует...

Интегрировать Swagger2
Интегрированный кварцевый каркас
Интегрировать докер
Реализация системы управления правами: управление пользователями, управление ролями, управление отделами, управление меню и другие модули

Создание фоновой структуры разрешений SpringBoot (1) - создание фоновой структуры