How to prevent the page from rendering without login in vue

In Vue, we often encounter situations where the page cannot be rendered when the user is not logged in. This problem is common in practical applications because users must have corresponding permissions to access specific pages.

In order to solve this problem, we can define a global routing guard in Vue's routing to prohibit the rendering of the page when the user is not logged in.

Below, we will introduce how to implement this function with specific examples.

The first step is to define routing guards

In Vue, we can control the access permissions of routes by defining routing guards. In this process, we need to use a routing hook function named "beforeEach", which will be called before each routing switch.

Specifically, we can add the following code to the routing definition:

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();
  }
});

In the above code, we first determine whether the user has login status through "localStorage", and then determine whether the current route requires Judgment of permissions. If judgment is required but the user is not logged in, jump to the login page and record the URL of the current page in order to automatically jump back to the original page after successful login.

It is worth mentioning that "localStorage" is a new feature in HTML5, which provides a way to store data on the client side. When we successfully log in, we can store the token in "localStorage" so that it can be used in subsequent routing decisions.

The second step is to define routes that require permission judgment

When defining routes, we can use the "meta" field to mark whether the current route requires permission judgment. If permission judgment is required, add the following code to the route definition:

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

In the above code, we added the "meta: { requireAuth: true }" field to the route that requires permission judgment, indicating that it needs to be Judgment of permissions.

The third step is to implement the login function

Finally, we need to implement the login function. When the user successfully logs in, the token needs to be stored in "localStorage" and redirected to the previously stored url.

Specifically, we can add the following code to the login page:

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

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

In the above code, after successful login, we store the token in "localStorage" and redirect to the previous The stored url.

Summary

Through the above steps, we can easily implement routing permission control in Vue. In practical applications, we can flexibly configure routing guards according to our own needs to achieve a more complex permission control mechanism.

In general, Vue is widely used in front-end frameworks, and Vue’s routing control is also a very important aspect. The above method can be said to be very representative in Vue's routing permission control solutions. It is very worthy of reference for those who learn Vue routing permission control.

The above is the detailed content of How to prevent the page from rendering without login in vue. For more information, please follow other related articles on the PHP Chinese website!