Vue 로그인 경로 검증 구현 방법

Vue 프로젝트의 로그인 상태를 vuex 상태를 사용하여 관리하는 경우 페이지를 새로 고치는 즉시 vuex에서 관리하는 상태가 사라져 로그인 라우팅 확인이 의미가 없게 됩니다. 스토리지 관리를 위해 로그인 상태를 웹 스토리지에 기록할 수 있습니다. 이 글은 주로 Vue 로그인 라우팅 확인 구현을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

단계는 다음과 같습니다.

1. 로그인 구성 요소에서 웹 저장소에 로그인 상태를 씁니다. (일반적으로 세션 저장소에 기록되며 세션이 닫히고 저장된 데이터는 자동으로 삭제됩니다.)

if('登录成功') 
 {sessionStorage.setItem('accessToken' , 写入登录成功返回的登录令牌或者自定义的判断字符串) }

2. 로그인 인증이 필요한 라우팅 메타 정보에 requireAuth(맞춤형) 추가
[html] 일반 사본 보기

routers: [ 
      { path: '/listInfo', 
         name: 'listInfo', 
         component: listInfo, 
         meta: { requiresAuth: true  
               } 
          } 
       ]

3. beforeEach 전역 후크 기능에서 페이지에 로그인이 필요한지 확인하세요.

router.beforeEach((to, from, next) => {  
    //to即将进入的目标路由对象，from当前导航正要离开的路由， next : 下一步执行的函数钩子
    if(to.path === '/login') { next() } // 如果即将进入登录路由，则直接放行
     else {   //进入的不是登录路由
         if(to.meta.requiresAuth && !sessionStorage.getItem('accessToken')) {next({ path: '/login' })} 
       //下一跳路由需要登录验证，并且还未登录，则路由定向到 登录路由
       else { next() }} 
      //如果不需要登录验证，或者已经登录成功，则直接放行
    }

참고: 전역 후크 beforeEach는 전역 구성 요소 앞과 전역 구성 요소 뒤에 배치되어야 합니다. 이때, 브라우저의 주소창에 가고자 하는 경로를 직접 입력하시면, 로그인 경로로 이동되지 않습니다.

관련 권장 사항:

Vue의 경로 확인 및 해당 차단 사용법에 대한 자세한 설명

PHP 프레임워크의 간단한 라우터

Vue.js를 빌드할 때 라우팅 오류를 해결하는 방법은 무엇입니까?

위 내용은 Vue 로그인 경로 검증 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!