간단한 설명

최근 프론트엔드와 백엔드를 분리하여 RBAC 기반의 권한 제어 문제를 연구하고 있습니다. vue-router를 사용하여 동적으로 경로를 추가할 때 작은 문제가 발생했습니다.

일반적인 아이디어는 다음과 같습니다:

• 백그라운드 사용자가 성공적으로 로그인한 후 해당 사용자에 해당하는 권한 목록을 서버에서 가져와 sessionStorage에 저장합니다.

• 사용자를 백엔드 홈페이지로 리디렉션

• router.beforeEach() 후크에서 sessionStorage의 권한 목록 데이터를 읽고 router.addRoutes()를 호출하여 경로를 동적으로 추가합니다.

코드

 router.beforeEach(to, from, next)
    {
        ...
        let 허가 = JSON.parse(window.sessionStorage.getItem('permission'))
        /*권한 = [...{"client_route":"/test"}...]*/
        if (허가) {
            newRoutes = []로 설정
            Permission.map((항목, 색인) => {
                newRoutes.push({
                    경로:'${item.client_route}',
                    구성요소: '../view${item.client_route.slice(1)}.vue',
                    메타:{인증:true}
                })
            })
            router.addRoutes(newRoutes)
        }
        ...
    }

여기서 문제가 발생합니다

모두 감사합니다