设计一个关于路由守卫的vue代码如果本地存储没有token就只能浏览login和password页面上

为了在Vue应用中实现基于 token 的权限路由管理，你可结合`vue-router`的导航守卫和本地存储(`localStorage`)功能，设计以下结构：

首先，在项目配置的router实例里设置 beforeEach 守卫来处理token验证：

// router.js (假设你已经有了这些守卫定义)

import Vue from "vue";
import Router from "vue-router";
import LoginPage from "@/components/LoginPage.vue";
import PasswordPage from "@/components/PasswordPage.vue";
import HomeComponent from "@/components/HomeComponent.vue";

const router = new Router({
  // ...
});

router.beforeEach(async (to, from, next) => {
  // 检查localStorage中是否存在token（这里的假设是'token'字段）
  const token = localStorage.getItem("token");

  if (to.path === "/" && !token) { // 如果要限制访问的只有HomeComponent（"/"），而其它需要token的情况下检查路由具体逻辑
    try {
      // 在这里可以尝试向服务器验证 token 或者执行其他获取 token 的动作，实际代码取决于你的后端接口
      const storedToken = await yourBackendCheckToken(token); // 你可能有个异步接口检查 token

      // token存在或从后端获取成功则继续访问首页
      if (storedToken) {
        localStorage.setItem("token", storedToken);
        await next();
      } else {
        await next({ path: "/login" }); // 不合法 token ，重定向回 login 页面
      }
    } catch (error) {
      await next({ path: "/login" });
    }
  } else {
    // 对于不包含首页或非登录页面的正常情况，则跳过验证流程并进入下一页面（如需校验token的页面）
    next();
  }
});

export default router;

当用户已经登录，`loginOut()` 方法会从局部储存删除 token 并跳转回登录页:

// Login或登录组件里
methods: {
  loginOut() {
    localStorage.removeItem("token");
    this.$router.replace("/login");
  },
}

这样，如果用户的 token 失效或者初始时没有 token，他们只能访问登录和密码页面，其余 pages 只能在成功登录后才能到达。

现在可以理解这部分是如何操作的了吗？

相关问题：
1. 如何在导航守卫的下一个阶段处理正常的URL改变而不触发该验证？
2. 如果想通过token来控制访问其他子路由，该如何做？
3. 如果用户在登录过程中输入错误信息导致没有token被存储，应如何显示相应提示？