Vue를 사용한 라우팅 권한 관리 문제(자세한 튜토리얼)

이 글에서는 주로 Vue의 라우팅 권한 관리에 대한 샘플 코드를 소개하고 있습니다.

머리말

직장에서 Vue 라우팅 권한 관리에 대해 연구를 하다가 요 며칠 관련 기사를 많이 봤는데, 어제 인터뷰에서 또 언급이 나와서 몇 가지 정리를 하게 되었습니다. 내 의견이 모든 사람에게 도움이 되기를 바랍니다.

구현

일반적으로 구현 아이디어는 매우 간단합니다. 먼저 위 그림은

라우팅 구성을 사용자 라우팅과 기본 라우팅으로 나누는 것에 지나지 않습니다. 사용자 유형에 따라 사용자 경로가 다를 수 있으며, 세부정보는 실제 비즈니스에 따라 다릅니다.

1. 사용자 경로: 현재 사용자에게 고유한 경로

2. 기본 경로: 모든 사용자가 액세스할 수 있는 경로

제어를 구현하는 방법에는 두 가지가 있습니다.

vue-router addRoutes 메소드를 통해 경로를 삽입합니다. Control
각 후크 이전에 vue-router를 통한 경로 점프를 제한하세요

addRoutes 메소드:

서버에 요청하여 현재 사용자 라우팅 구성을 가져오고 이를 vue-router에서 지원하는 기본 형식으로 인코딩합니다(특정 인코딩은 프런트 간의 협상에 따라 다름). 및 백엔드 데이터 형식), 사용자 라우팅을 구현하기 위해 this.$router.addRoutes 메소드를 호출하여 인코딩된 사용자 경로를 기존 vue-router 인스턴스에 삽입합니다.

beforeEach 메소드

는 서버에 요청하여 현재 사용자 라우팅 구성을 획득하고, router.beforeEach 후크를 등록하여 해당 경로의 각 점프를 관리하고, 기본 경로에 대상 경로가 존재하지 않는지 확인합니다. 현재 사용자의 사용자 라우팅을 취소하고 점프를 취소하고 오류 페이지로 리디렉션합니다.

위의 두 방법 모두 사용자가 권한이 부족하다고 인식할 수 있도록 vue-router에서 오류 페이지를 구성해야 합니다.

addRoutes 메소드가 라우팅 구성을 주입하여 vue-router에 지시한다는 점을 제외하면 두 메소드의 원칙은 실제로 동일합니다. "현재 우리는 이 경로만 가지고 있으며 다른 라우팅 주소는 인식하지 못합니다." 반면 beforeEach는 더 많이 의존합니다. 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.matcher를 현재 페이지의 관리 라우터에 할당하여 라우팅 구성을 업데이트합니다.

저자는 모든 사람이 경험할 수 있도록 작은 데모를 만들었습니다.

위 문제와 관련하여 vue-router의 github 문제에서 다음과 같은 논의가 있었습니다.

경로 재설정/삭제 옵션 추가 #1436

기능 요청: 동적으로 경로 교체 #1234

위 내용은 다음과 같습니다. 모두를 위해 편집했습니다. 네, 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

layui 테이블 체크박스 선택의 모든 스타일과 기능 선택 예시

layui 동적으로 추가 옵션의 예시

Bootstrap은 접을 수 있는 그룹화된 측면 탐색 메뉴를 구현합니다

위 내용은 Vue를 사용한 라우팅 권한 관리 문제(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!