前端如何用cookie做路由守卫

在前端中，我们可以使用 cookie 做路由守卫来控制用户访问某些页面的权限。下面是一个简单的示例：

首先，我们可以在用户登录成功后，将用户的信息存储到 cookie 中，如下所示：

// 登录成功后，将用户信息存储到 cookie 中
document.cookie = 'user=' + encodeURIComponent(JSON.stringify(userInfo));

然后，在需要进行路由守卫的页面中，我们可以读取 cookie 中的用户信息，判断用户是否有权限访问该页面。如果用户没有权限访问该页面，则可以跳转到其他页面或者提示用户没有权限。

// 读取 cookie 中的用户信息
const cookieArr = document.cookie.split(';');
const userCookie = cookieArr.find(cookie => cookie.trim().startsWith('user='));
const userInfo = userCookie ? JSON.parse(decodeURIComponent(userCookie.substring('user='.length))) : null;

// 判断用户是否有权限访问该页面
if (!userInfo || !userInfo.hasPermission) {
  // 用户没有权限访问该页面，跳转到其他页面或者提示用户没有权限
  // 如：
  router.replace('/403');
  return;
}

在上面的示例中，我们将用户信息存储到了 cookie 中，并在需要进行路由守卫的页面中读取了 cookie 中的用户信息，根据用户信息判断用户是否有权限访问该页面。如果不符合条件，我们可以进行相应的跳转或提示。

需要注意的是，由于 cookie 存储在客户端，因此用户可以手动修改 cookie 中的信息。所以，我们需要在后端对用户的权限进行验证，以确保用户没有越权访问页面。