Vue-router 라우팅은 페이지가 로그인되지 않았음을 확인하고 로그인 페이지로 이동합니다.

이 글에서는 주로 Vue-router가 페이지가 로그인되지 않았음을 확인하고 로그인 페이지로 이동하는 방법에 대한 예를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

아래와 같이:

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
 if (token) { // 判断当前的token是否存在
  next();
 }
 else {
  next({
  path: '/login',
  query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
  })
 }
 }
 else {
 next();
 }
});

이전에 경로에 메타 속성이 추가되었습니다:

{
 path: '/index',
 meta: {
  title: '',
  requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
 },
}

참고: 하지만 사실은 대부분 로그인 시 점프가 없으므로 로그인 점프 경로를 추가하세요.

if(this.$route.query.redirect){
//  let redirect = decodeURIComponent(this.$route.query.redirect);
  let redirect = this.$route.query.redirect;
  this.$router.push(redirect);
}else{
  this.$router.push('/');
 }

관련 권장사항:

컴포넌트 간 점프를 구현하는 세 개의 Vue-Router

컴포넌트 간 점프 매개변수 전송을 구현하는 vue-router 정보

vue-에 대한 자세한 설명 라우터 라우팅 및 페이지 간 탐색

위 내용은 Vue-router 라우팅은 페이지가 로그인되지 않았음을 확인하고 로그인 페이지로 이동합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!