Vuejs 전투 항목 사 : 권한이 있는지 확인하기

이동 경로 참조 문서 : https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

SRC 권한을 확인 /에 permission.js 만들기

그리고에서 main.js의 글로벌 소개 :

수입 './permission'

/ * * 
 * 권한 확인 : 
 * 사전 후크 기능 beforeEach을 (옆에서) 뷰 라우터 에 
 이미 로그인 여부 * 점프를 라우팅하기 전에 결정 후 비 착륙 로그인 페이지에 액세스를 허용한다, 그렇지 않으면 다시 로그인 페이지로 
 * 
 * :까지 입력하는 방법에 대한 대상 경로 개체 
 개체를 라우팅하는 것은두고하는 것입니다 :에서 *를 
 * 다음은 : 방법, 당신은 라우팅 주소를 지정할 수 있습니다, 라우팅 점프 
 * / 

가져 오기 라우터 './router' 
getUserInfo 가져 오기 {에서} '@ / API / 로그인' 

router.beforeEach ((다음의)에 > = { 

    // 1. 토큰 받기 
    를 const = localStorage.getItem 토큰 ( 'MSM-토큰' )
     IF ! ( 토큰) {
         // 응답이 수신되지 않으면 1.1, 비 로그인 페이지로 접속, 로그인 페이지 / 로그인으로 이동, 방문하지 
        IF ! (to.path = '/ 로그인' {)
            다음 ({경로 :'/ 로그인' }) 
        } 다른 {
             // 요청 로그인 페이지 / 로그인 
            다음 ({}) 
        } 
    } 다른 {
         // 획득 한 토큰, 1.2 
        // 1.2.1 요청 라우팅 / 로그인을 한 다음 대상 경로로 이동 
        IF (에 === '/ 로그인'.path ) { 
            다음 () 
        } 다른 {
             // 1.2.2 비 로그인 페이지 요청 라우팅을 참조하는 경우 로컬 사용자 정보 
            CONST = localStorage.getItem 사용자 정보 ( '사용자 MSM' )
             만약에 (유저 정보) {
                 // 로컬 취득 그것을 직접 대상 노선 
                다음 () 
            } 그밖에는 {
                 // 사용자 정보를 로컬에없는 경우, 사용자 정보 토큰을 획득한다 
                getUserInfo (토큰) 그 때는 (대응 => { 
                    CONST RESP = response.data를
                     IF (resp.flag)는 {
                         // 취득한 경우 사용자 정보, 비 로그인 페이지 또는 다시 로그인 페이지로는 
                        // 로컬에 저장 
                        localStorage.setItem ( 'MSM-사용자' , JSON.stringify (resp.data)) 
                        다음은 () 
                    } 다른 {
                         // 사용자에 도착하지 않았다 정보, 다시 로그인 
                        '/ 로그인 : 다음 ({경로를 '})  
                    }
                }) 
            } 
        } 
    } 

})