路由守卫

什么是路由守卫

当用户访问一个界面时，路由守卫会在路由跳转之前对用户的身份进行验证，以确保用户具有访问该页面的权限。路由守卫可以阻止未经授权的用户访问敏感信息或页面，从而提高网站的安全性。
路由守卫是一个路由的访问机制，如果允许访问就放行，不允许访问就不放行，可以通过 router.beforeEach() 方法来实现对应的操作。

在Vue.js中，路由守卫主要有三种类型：全局守卫、路由独享守卫和组件守卫。

全局守卫可以在整个应用程序中使用，每当用户进行路由跳转时都会触发，可用于验证用户是否已登录或根据访问路径限制访问权限等。

路由独享守卫可以在某个路由上单独设置，只在该路由跳转时触发，可用于特殊的页面访问限制等。

组件守卫可以在某个组件上设置，它会在该组件渲染时触发，可用于验证用户是否有权限或发送请求等。

为什么要用路由守卫？

由于访问路由时，没有判断直接就可以进入系统，跳过登陆页面，导致系统不安全，所以需要用路由守卫

路由守卫的示例

// 全局守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.meta.requiresAuth) {
    if (token) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

// 路由独享守卫
{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    const isAdmin = checkIfAdmin();
    if (isAdmin) {
      next();
    } else {
      next('/error');
    }
  }
}

// 组件守卫
export default {
  name: 'Profile',
  beforeRouteEnter (to, from, next) {
    const isLoggedIn = checkIfLoggedIn();
    if (!isLoggedIn) {
      next('/login');
    } else {
      next();
    }
  }
}

在上面的示例中，全局守卫用于验证用户是否已登录，并根据用户是否已登录决定是否允许访问需要权限的页面。路由独享守卫用于检查是否为管理员用户，只有管理员可以访问/admin路由。组件守卫用于检查当前用户是否已登录，如果没有登录则重定向到登录页面。

需要注意的是，路由守卫的实现可能因框架而异，上面的示例是在Vue.js中的实现，其他框架中的实现可能会有所不同。