Vue는 로그인 후 페이지가 이전 페이지로 이동한다는 것을 인식합니다.

개발 중에 사용자가 페이지에 들어가려면 링크를 직접 클릭해야 하는 경우가 종종 있습니다. 사용자가 링크를 클릭하면 401 차단이 실행되어 로그인 인터페이스로 돌아갑니다. 홈페이지가 아닌 링크된 페이지로 이동합니다. 이 문제를 해결하는 방법은 무엇입니까? 이 글에서는 로그인 후 이전 페이지로 이동하기 위해 Vue가 구현하는 기능을 주로 공유합니다. 이러한 편의가 필요한 친구들은 이 기능을 통해 배울 수 있습니다. 그것이 모두에게 도움이 되기를 바랍니다.

먼저 사용해야 하는 몇 가지 API에 대해 이야기하겠습니다.

1.router.currentRoute: 현재 라우팅 정보 객체로, 쿼리 매개변수 및 해시의 전체 경로를 포함하여 router.currentRoute.fullPath를 통해 구문 분석된 URL을 얻을 수 있습니다. , 접속하려는 페이지의 경로에 이름이 있으면 router.currentRoute.name을 통해 현재 경로의 이름을 얻을 수 있습니다.

2.router.replace: 기능은 router.push와 동일하지만, 기록에 새로운 기록을 추가하지 않고, 현재 기록 기록을 대체합니다.

모든 사람의 코드가 다르게 작성되므로 구체적인 구현 코드는 포함하지 않지만 아이디어를 간략하게 소개하겠습니다.

1. 사용자가 링크를 클릭하면 대상의 라우팅 페이지로 이동한 다음, 401 차단을 실행하고 로그인 페이지로 돌아갑니다:

//401拦截
if（status == "401"）{
  router.push("/login")   
}

2. 401 차단 시 대상 링크를 URL에 저장할 수 있습니다:

if (status == 401) {
   //判断当前的路由是否是目标路由
   if(router.currentRoute.name == "target"){
    //跳转回login路由，并把目标路由的url路径保存在login的query中
    router.replace({
     name:"login",
     query: {redirect: router.currentRoute.fullPath}
    })
   }else{
    /* 普通401拦截直接返回到登录页面 */
    router.push('/login');
   }
  }

3. 바로 돌아갈 수 있는 URL 대상 페이지

router.push({path:decodeURIComponent(url)});

관련 추천:

WeChat Xiaocheng에서 텍스트를 클릭하여 페이지 점프 기능을 구현하는 방법

html 페이지 점프 전달 매개변수에 대한 질문에 대한 답변

HTML 페이지 점프 및 매개변수 전달 질문

위 내용은 Vue는 로그인 후 페이지가 이전 페이지로 이동한다는 것을 인식합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!