Босс разрешил мне начать работу с nx-admin за десять минут

внешний интерфейс Vue.js Vuex vue-router

Общий процесс

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

адрес проекта nx-admin

Во-первых, я не буду здесь объяснять базовые вещи, такие как vue и vuex, если вам интересно, вы можете обратиться к официальной документации, чтобы понять. Вот примерное описание процесса

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

Сначала найдите конфигурацию маршрутизации, конфигурация маршрутизации находитсяsrc/router/index.jsВ конфигурации маршрутизации выставлены две константы, однаconstantRouterMapДругой естьasyncRouterMapДавайте поговорим об этом здесьconstantRouterMap. Проверка разрешения nx-admin, вероятно,

  • 1 По умолчанию страница, доступная всем, не требует разрешения, а страница, доступная всем, определяется какconstantRouterMap

  • 2 Маршрут страницы, требующий входа или разрешения, определяется какasyncRouterMap

Динамически загружать страницу, соответствующую разрешениям meta.role в asyncRouterMap, в соответствии с разницей информационных ролей пользователя (разрешений), полученных в фоновом режиме.

Что делать после успешного входа

После нажатия кнопки «Войти» на левой боковой панели появится список навигации. Здесь два вопроса?

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

  • Что произошло с процессом входа в систему после того, как я нажал «Войти»? Где существуют права пользователя? где жетон?

Динамический рендеринг боковой панели

Ответ на вопрос 1 Сначала находим макет, которыйsrc/views/layout/Layout.vue, Потому что в файле конфигурации маршрутизации мы видимasyncRouterMapРодительские компоненты многих компонентов вLayoutсуществуетLayoutМы видим, что есть компонентsidebar. ок, продолжай искатьsidebarэтот компонентsrc/views/layout/components/Sidebar/index.vue, обнаружил, что вот рендеринг сайдбара, а потом обнаружил, что визуализированная переменнаяpermission_routersЭта переменная существует в vuex, что означает, что маршрут существует в vuex, поэтому давайте перейдем к vuex, чтобы найти его.src/store/modules/permission.js.

Динамическая загрузка маршрутов

src/store/modules/permission.jsВ этом файле есть действия

 GenerateRoutes({ commit }, data) {
      return new Promise(resolve => {
        const { roles } = data
        let accessedRouters
        if (roles.indexOf('admin') >= 0) {
          accessedRouters = asyncRouterMap
        } else {
          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
        }
        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })
    }

Выяснилось, что в этом куске кода изменились разрешения_маршрутизаторы, не будем вдаваться в конкретную логику, простое объяснение заключается в том, что

 如果用户的权限是管理员
        把asyncRouterMap所有的路由页面都渲染出来,毕竟管理员嘛 你懂的权限嘛。
    否则 
        我不是管理员但是也不是游客就是一小市民 那么我要去asyncRouterMap中找找我小市民能够访问哪些页面。

Прочитав эту логику, мы будем знать, как этот маршрут динамически меняется и так далее, вы ничего не забыли? Хотя я в курсе этих действий, однако. . . Где это называется? После тщательного рассмотрения, потратив 0,1 с, делается вывод, что, поскольку это маршрутизация, должно быть глобальное место для суждения, поэтому вывод таков:router.beforeEach, сначала найдите этоsrc/main.js,ОбнаружитьbeforeEachразделены вsrc/permission.jsОткройте этот файл. Все сомнения решены.

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

серьезно. . Этот файл очень длинный. . Я не хочу смотреть. . . . Код на картинке ниже такой длинный, посмотрите на волосы. . Так я просто перевел

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar 
  if (getToken()) { // 判断是否有token
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
    } else {
      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetUserInfo').then(res => { // 拉取user_info
          const roles = res.data.role
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch(() => {
          store.dispatch('FedLogOut').then(() => {
            Message.error('Verification failed, please login again')
            next({ path: '/login' })
          })
        })
      } else {
        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
        if (hasPermission(store.getters.roles, to.meta.role)) {
          next()//
        } else {
          next({ path: '/401', query: { noGoBack: true }})
          NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
        }
        // 可删 ↑
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next()
    } else {
      next('/login') // 否则全部重定向到登录页
      NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
    }
  }
})

Пожалуйста, говорите человеческим языком и переведите версию на человеческий язык. . .

  每次更改页面路由
        你有没有token啊？
            有啊
                好的,你的权限是默认的权限0么？
                    是的。。我就是一游客
                        系统获取我的信息..拿到权限值,动态加载路由(GenerateRoutes)...通行...
                    不是。。我是权限汪(admin)
                        等等..我看看作者有没有把你降级
                            没有
                                好了。。你还是权限汪 请进
                            有
                                滚吧,你已经不是权限汪了,作者已经把你写成战斗力只有5的渣渣了
            没有
                没有还敢闯这里？滚去关口(/login)

Да, это так просто. Весь процесс проверки авторизации завершен. Осталось только прочитать документацию и посмотреть, как использовать компоненты и тому подобное.

Ссылка https://github.com/Relsoul

Категории