vue 시리즈 의 동적 경로 상세 설명[오리지널]

문 제 를 풀다
최근 에 vue 로 작은 프로젝트 를 구 축 했 습 니 다.프로젝트 는 iframe 형식 으로 다른 프로젝트 에 포함 되 어 있 기 때문에 로그 인 에 대한 검증 이 비교적 번 거 롭 습 니 다.아예 백 엔 드 사내 들 은 현재 의 문 제 를 바탕 으로 해결 방안 을 제 시 했 습 니 다.그들의 해결 방안 을 보기 전에 저 는 비교적 표준적 인 단일 시스템 의 해결 방안 을 그 렸 습 니 다.
본문 목록:
구상
토론
실현
총화
구상

간단하게 설명 하면 위의 그림 은:
먼저 전단 은 쿠키 에서 token 을 가 져 옵 니 다.token 이 없 으 면 로그 인 페이지 로 이동 하여 로그 인 합 니 다.로그 인 검증 후 token 을 생 성하 여 데이터베이스 에 존재 하고 전단 으로 되 돌려 줍 니 다.전단 에 이 token 을 저장 합 니 다.브 라 우 저의 새로운 tab 페이지 에 로그 인 할 필요 가 없 도록 전단 에 이 token 을 쿠키 에 저장 해 야 합 니 다.
사용자 가 token 이 있 으 면 사용자 정보 가 있 는 지 다시 확인 합 니 다.사용자 정 보 를 요청 하 는 인터페이스 가 없 으 면 배경 에서 사용자 의 기본 정 보 를 읽 고 전단 으로 돌아 갑 니 다.전단 은 배경 에서 돌아 오 는 사용자 권한 에 따라 고정된 경로 표를 만들어 페이지 차단 에 사용 합 니 다.
사용자 token 과 권한 이 있 는 상황 에서 자신의 권한 내 페이지 에 들 어가 token 을 데 리 고 배경 에 가서 상호작용 을 합 니 다.
사용자 가 종료 할 때 배경 인 터 페 이 스 를 요청 하여 token 데 이 터 를 제거 합 니 다.
토론
회사 의 프로젝트 가 더욱 복잡 하기 때문에 원래 의 시스템 을 바탕 으로 새로운 시스템 모듈 을 개발 하 는 것 에 속 하지만 이런 모듈 들 은 앞으로 주체 기능 의 업 데 이 트 를 위해 다음 교체 에 상대 적 인 독립 성 을 유지 해 야 한다.앞으로 의 오래된 시스템 은 하나의 사용자 센터 의 기능 만 일 으 킬 것 으로 예상 된다.현 재 는 단일 로그 인 을 실현 하 는 능력 을 바탕 으로 현재 의 새로운 프로젝트 를 교체 하고 업데이트 하 는 것 이다.
오늘 오전 에 로그 인 실현 에 대해 관련 토론 을 했 습 니 다.회사 프로젝트 의 비밀 유지 고려 는 관련 소개 만 했 기 때 문 입 니 다.
기 존의 오래된 프로젝트 는 사용자 센터 로 천천히 전환 되 며,이전의 새로운 프로젝트 는 이 사용자 센터 에 가서 로그 인 정 보 를 얻어 야 한다.구체 적 인 실현 은:
새 항목 b.exaplem.com 에 로그 인하 여 세 션 을 통 해 로그 인 되 지 않 은 것 을 감지 하 였 을 때(새 항목 과 오래된 항목 이 같은 도 메 인 이름 아래 있다 고 말 합 니 다)a.exaplem.com 으로 넘 어 갑 니까?returnUrl='b.exaplem.com',a.exaplem.com 에서 로그 인 에 성공 한 후 ticket 을 생 성하 여 b.exaplem.com,b.exaplem.com 에 게 이 ticket 을 session 에 저장 하여 로그 인 상 태 를 유지 합 니 다.
지금 은 기본적으로 a.exaplem.com 에 로그 인 한 다음 에 b.exaplem.com 에 로그 인 하기 때문에 우리 가 처음으로 b.exaplem.com 시스템 에 들 어 갔 을 때 b.exaplem.com 은 a.exaplem.com 시스템 에 티켓 을 가 져 오 라 고 요청 하고 session 을 생 성하 여 로그 인 상 태 를 유지 합 니 다.
실현
그 당시 vuex 를 도입 하고 쿠키 를 통 해 token 의 상 태 를 저장 하려 고 했 으 나 현재 프로젝트 는 백 엔 드 에서 session 형식 으로 사용자 의 로그 인 상 태 를 유지 하기 때문에 vuex 를 도입 하지 않 았 습 니 다.
기본 실현 은 다음 과 같다.
main.js 에 추 가 된 permission.js 파일 은 다음 과 같 습 니 다.

import Vue from 'vue'
import router from './router'
import { asyncRouterMap, constantRouterMap } from './router'
 
function hasPermission(roles, route) { //
 if (route.meta && route.meta.role) {
  return roles.some(role => role === route.meta.role)
 } else {
  return true
 }
}

function filterAsyncRouter(asyncRouterMap, roles) {

 const accessedRouters = asyncRouterMap.filter(route => {
  if (hasPermission(roles, route)) {
   if (route.children && route.children.length) {
    route.children = filterAsyncRouter(route.children, roles)
   }
   return true
  }
  return false
 })

 return accessedRouters
}

//       
router.beforeEach((to, from, next) => {
 NProgress.start() //   Progress
 if (to.path == '/ContractAduit/Error') {
  next()
 } else if (!Vue.prototype.hasRoute) {

  Vue.prototype.$ajax.get(Vue.prototype.$api.getModuleHost("        "), {})
   .then(data => {
    if (data.code == 1000) {
     let menus = data.menu
     let roles = menus.map((menu, index) => {
      return parseInt(menu.url);
     })
     const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
     router.addRoutes(accessedRouters)
     Vue.prototype.userInfo = {
      id: data.id,
      realname: data.realname
     }
     Vue.prototype.hasRoute = true;
     next({...to })
    } else {
     router.push({ name: 'ErrorPageRouter' });
    }
   })
   .catch(err => console.log(err))
 } else {
  next()
 }
});

route.js 파일 은 다음 과 같 습 니 다.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRouterMap = [{
  path: '/404',
  name: 'NoFoundPagetRouter',
  component: require('../views/404.page'),
  meta: {
   title: '404',
  }
 },
 {
  path: '/ContractAduit/NoAccess',
  name: 'NoAccessPageRouter',
  component: require('../views/no-access.page'),
  meta: {
   title: '   ',
  }
 },
 {
  path: '/ContractAduit/Error',
  name: 'ErrorPageRouter',
  component: require('../views/error.page'),
  meta: {
   title: '    ',
  }
 }
]

export default new Router({
 mode: 'history',
 routes: constantRouterMap
})

export const asyncRouterMap = [{ 
  path: '/ContractAduit/Supplier/List',
  name: 'SupplierListPageRouter',
  component: require('../views/supplier/supplier-list.page.vue'),
  meta: {
   title: '     ',
   role: 10001
  }
 },
 ...
 {
  path: '/',
  redirect: '/ContractAduit/Supplier/List',
  hidden: true,
  meta: {
   title: '     ',
   role: 10001
  }
 }, {
  path: '*',
  redirect: '/404',
  hidden: true
 }
]

vuex 가 도입 되 지 않 았 기 때문에 VUE 구조 함수 의 원형 대상 에 변 수 를 설명 하여 사용자 의 기본 정 보 를 끌 어 올 렸 는 지 판단 해 야 합 니 다.우리 백 엔 드 의 권한 은 설 정 된 페이지 급 권한 이기 때 문 입 니 다.(즉,캐릭터 에 따라 어느 전단 페이지 에 접근 할 수 있 는 지 를 설정 하 는 것 이 아니 라 백 엔 드 에서 돌아 오 는 페이지 코드 에 따라 어느 전단 페이지 에 접근 할 수 있 는 지 판단 하 는 것 입 니 다)
총화
우리 의 프로젝트 가 천편일률 적 인 상황 에 이 를 수 없 기 때문에 자신의 프로젝트 에 맞 는 해결 방안 을 선택 하 는 것 이 가장 중요 하 다.어떤 기술 을 사용 하기 위해 어떤 기술 을 사용 하지 마라.
이상 의 vue 시리즈 의 동태 적 인 경로 에 대한 상세 한 설명[오리지널]은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 여러분 들 이 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.