vue에 로그인하지 않고 페이지가 렌더링되는 것을 방지하는 방법

Vue에서는 사용자가 로그인하지 않은 경우 페이지를 렌더링할 수 없는 상황이 자주 발생합니다. 이 문제는 사용자가 특정 페이지에 액세스하려면 해당 권한이 있어야 하기 때문에 실제 응용 프로그램에서 흔히 발생합니다.

이 문제를 해결하기 위해 Vue의 라우팅에 전역 라우팅 가드를 정의하여 사용자가 로그인하지 않은 경우 페이지 렌더링을 금지할 수 있습니다.

아래에서는 구체적인 예시를 통해 이 기능을 구현하는 방법을 소개하겠습니다.

첫 번째 단계는 라우팅 가드를 정의하는 것입니다.

Vue에서는 라우팅 가드를 정의하여 경로의 액세스 권한을 제어할 수 있습니다. 이 프로세스에서는 각 라우팅 스위치 이전에 호출되는 "beforeEach"라는 라우팅 후크 함수를 사용해야 합니다.

구체적으로 다음 코드를 경로 정의에 추가할 수 있습니다.

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem("token");  // 判断是否有登陆态
  if (to.meta.requireAuth) {  // 判断当前路由是否需要进行权限判断
    if (isLogin) {  // 已经登陆
      next();
    } else {  // 没有登陆，跳转到登陆页面
      next({
        path: "/login",
        query: {
          redirect: to.fullPath  // 记下跳转前的 url，为了登陆后自动跳转回原页面
        }
      });
    }
  } else {
    next();
  }
});

위 코드에서는 먼저 "localStorage"를 사용하여 사용자가 로그인했는지 확인한 다음 현재 경로에 권한이 필요한지 여부를 확인합니다. 판단이 필요한데 사용자가 로그인되어 있지 않은 경우, 로그인 성공 후 자동으로 원래 페이지로 돌아갈 수 있도록 로그인 페이지로 점프하고 현재 페이지의 URL을 기록해 두십시오.

"localStorage"는 클라이언트 측에 데이터를 저장하는 방법을 제공하는 HTML5의 새로운 기능이라는 점을 언급할 가치가 있습니다. 성공적으로 로그인하면 이후 라우팅 결정에 사용할 수 있도록 토큰을 "localStorage"에 저장할 수 있습니다.

두 번째 단계는 권한 판단이 필요한 경로를 정의하는 것입니다.

경로를 정의할 때 "meta" 필드를 사용하여 현재 경로에 권한 판단이 필요한지 여부를 표시할 수 있습니다. 권한 판단이 필요한 경우 경로 정의에 다음 코드를 추가합니다.

const router = new VueRouter({
  routes: [
    {
      path: "/home",
      name: "home",
      component: Home,
      meta: { requireAuth: true }  // 需要进行权限判断
    },
    {
      path: "/login",
      name: "login",
      component: Login
    }
  ]
});

위 코드에서는 권한 판단이 필요한 경로에 "meta: { requireAuth: true }" 필드를 추가하여 권한 판단이 필요함을 나타냅니다. .

세 번째 단계는 로그인 기능을 구현하는 것입니다

마지막으로 로그인 기능을 구현해야 합니다. 사용자가 성공적으로 로그인하면 토큰이 "localStorage"에 저장되고 이전에 저장된 URL로 리디렉션되어야 합니다.

구체적으로 로그인 페이지에 다음 코드를 추가할 수 있습니다.

methods: {
  login() {
    // 登陆成功后，存储 token
    localStorage.setItem("token", "userToken");

    // 重定向到之前存储的 url
    if (this.$route.query.redirect) {
      this.$router.push(this.$route.query.redirect);
    } else {
      this.$router.push("/");
    }
  }
}

위 코드에서는 로그인에 성공한 후 토큰을 "localStorage"에 저장하고 이전에 저장된 URL로 리디렉션합니다.

요약

위 단계를 통해 Vue에서 라우팅 권한 제어를 쉽게 구현할 수 있습니다. 실제 애플리케이션에서는 보다 복잡한 권한 제어 메커니즘을 달성하기 위해 필요에 따라 라우팅 가드를 유연하게 구성할 수 있습니다.

일반적으로 Vue는 프런트엔드 프레임워크에서 널리 사용되며 Vue의 라우팅 제어도 매우 중요한 측면입니다. 위의 방법은 Vue의 라우팅 권한 제어 솔루션에서 매우 대표적인 방법이라고 할 수 있습니다. Vue 라우팅 권한 제어를 배우는 사람들에게는 매우 참고할만한 가치가 있습니다.

위 내용은 vue에 로그인하지 않고 페이지가 렌더링되는 것을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!