Vue 의 루트 권한 관리 에 대한 예시 코드

머리말
업무 상 vue 경로 의 권한 관리 에 대해 연 구 를 한 적 이 있 습 니 다.요 며칠 동안 관련 글 을 몇 편 보 았 습 니 다.게다가 어제 전기 면 에서 다시 한 번 언급 하면 서 자신의 견 해 를 아예 정리 하여 여러분 에 게 도움 이 되 기 를 바 랍 니 다.
이루어지다
대체적으로 실현 되 는 사고방식 은 매우 간단 하 다.먼저 그림 을 그린다.

경로 설정 을 사용자 유형 에 따라 사용자 경로 와 기본 경로 로 나 누 는 것 이 아니 라 서로 다른 사용자 유형 에 서로 다른 사용자 경로 가 존재 하고 실제 업무 에 구체 적 으로 의존 할 수 있 습 니 다.

사용자 경로:현재 사용자 가 가지 고 있 는 경로

기본 경로:모든 사용자 가 방문 할 수 있 는 경로

통 제 를 실현 하 는 방식 은 두 가지 로 나 뉜 다.
vue-router addRoutes방법 으로 루트 를 주입 하여 제 어 를 실현 하 다
vue-router beforeEach갈 고 리 를 통 해 경로 의 도약 을 제한 합 니 다.
addRoutes 방식:
요청 서버 를 통 해 현재 사용자 경로 설정 을 가 져 옵 니 다.vue-router 가 지원 하 는 기본 형식 으로 인 코딩 합 니 다.(구체 적 인 인 인 코딩 은 앞 뒤 가 협상 한 데이터 형식 에 달 려 있 습 니 다)this.$router.addRoutes 방법 을 호출 하여 인 코딩 된 사용자 경 로 를 기 존의 vue-router 인 스 턴 스 에 주입 하여 사용자 경 로 를 실현 합 니 다.
beforeEach 방식
요청 서버 를 통 해 현재 사용자 경로 설정 을 가 져 옵 니 다.router.beforeach 갈 고 리 를 등록 하여 경로 의 매번 점프 를 관리 하고 매번 점프 를 검사 합 니 다.목표 경로 가 기본 경로 와 현재 사용자 경로 에 저장 되 지 않 으 면 점프 를 취소 하고 오류 페이지 로 전환 합 니 다.
상기 두 가지 방식 은 모두 vue-router 에 오류 페이지 를 설정 하여 사용자 의 감지 권한 이 부족 하도록 해 야 합 니 다.
두 가지 방식 의 원 리 는 모두 같 습 니 다.다만 addRoutes 방식 은 주입 경로 설정 을 통 해 vue-router 에 게 알려 줍 니 다."현재 우 리 는 이 경로 만 있 습 니 다.다른 경로 의 주 소 는 전혀 알 아 보지 못 합 니 다."그리고 beforeech 는 우리 가 수 동 으로 vue-router 를 통 해 어떤 페이지 가 갈 수 있 는 지,어떤 페이지 가 갈 수 없 는 지 를 식별 하 는 것 입 니 다.말하자면 자동 과 수 동 의 차이 이다.이 쯤 되면 모두 가 자동 이 라 고 생각 할 것 이다.그러면 addRoutes 가 가장 편리 하고 빠 르 며 업무 코드 도 간소화 할 수 있다 고 생각 할 것 이다.필 자 는 처음에 도 이렇게 생각 했 지만!많은 사람들 이 한 가 지 를 소홀히 했다.

addRoutes 방법 은 새로운 길 을 주입 하 는 것 일 뿐 다른 길 을 제거 하 는 데 도움 을 주지 않 았 습 니 다!
이러한 상황 이 존재 한다 고 가정 합 니 다.사용 자 는 자신의 컴퓨터 에서 관리자 계 정 에 로그 인 했 습 니 다.이 럴 때 경로 에 관리자 의 길 을 주입 한 다음 에 로그 인 을 종료 하고 페이지 를 새로 고침 하지 않 고 일반 사용자 계 정 으로 로그 인 합 니 다.이 럴 때 경로 에 일반 사용자 의 길 을 주입 합 니 다.그러면 경로 에 두 가지 사용자 유형의 경로 가 존재 합 니 다.사용자 가 감지 하지 않 더 라 도 url 을 바 꾸 면 일반 사용자 가 관리자 의 페이지 를 방문 할 수 있 습 니 다!
이 문제 에 대해 서도 해결 방법 이 하나 있다.

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const createRouter = () => new Router({
 mode: 'history',
 routes: []
})
const router = createRouter()
export function resetRouter () {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher
}
export default router

새로운 Router 를 새로 만 든 다음 에 새로운 Router.matcher 를 현재 페이지 의 관리 Router 에 부여 하여 경로 설정 을 업데이트 하 는 목적 을 달성 합 니 다.
필 자 는 하나데모를 만 들 었 으 니 모두 가 갈 수 있다체험 해 보다.
상기 문제 에 대해vue-router의 github issues 에서 토론 한 적 이 있 는데 각각 다음 과 같다.
Add option to Reset/Delete Routes #1436
Feature request: replace routes dynamically #1234
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.