Vue의 라우팅 권한 관리
- php中世界最好的语言원래의
- 2018-03-28 16:57:062257검색
이번에는 Vue의 라우팅권한 관리에 대해 알려드리겠습니다. Vue 라우팅 권한 관리에 대한 주의사항은 무엇이며, 다음은 실제 사례입니다. 살펴보겠습니다.
머리말
직장에서 Vue 라우팅 권한 관리에 대해 연구를 하다가 요 며칠 관련 기사를 많이 봤는데, 어제 인터뷰에서 또 언급이 나와서 몇 가지 정리를 하게 되었습니다. 내 의견이 모든 사람에게 도움이 되기를 바랍니다.
구현
일반적으로 구현 아이디어는 매우 간단합니다. 먼저 위 그림은
라우팅 구성을 사용자 라우팅과 기본 라우팅으로 나누는 것에 지나지 않습니다. 사용자 유형에 따라 사용자 경로가 다를 수 있으며, 세부정보는 실제 비즈니스에 따라 다릅니다.
사용자 경로: 현재 사용자에게 고유한 경로
기본 경로: 모든 사용자가 액세스할 수 있는 경로
제어를 달성하는 방법에는 두 가지가 있습니다.
vue-router addRoutes를 통해 주입 method 라우팅 구현 control
Each 후크 이전에 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 문제에서 다음과 같은 논의가 있었습니다.
Add option to Reset/Delete Routes #1436
기능 요청: 동적으로 경로 교체 #1234
믿습니다. 당신은 이 기사를 읽었습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
vue에서 도메인 간 처리를 위해 axios를 사용하는 방법
위 내용은 Vue의 라우팅 권한 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!