假如 有三账号（user、admin、manager）密码相同(123456) 首页需要登录才能访问 默认初始打开是登录页面 三个账号有对应的页面同时三个账号权限不同 admin可以访问user与manager的页，而user与manager 只能访问自己对应的页面 则在vue3 如何实现权限登录

在 Vue3 中，我们可以使用路由守卫来实现权限登录。具体的实现步骤如下：

1. 定义路由

首先，我们需要定义路由，包括登录页和三个账号对应的页面。同时，需要配置路由元信息，用于记录每个路由需要的权限等级。

import { createRouter, createWebHistory } from "vue-router";
import Login from "@/views/Login.vue";
import User from "@/views/User.vue";
import Admin from "@/views/Admin.vue";
import Manager from "@/views/Manager.vue";

const routes = [
  {
    path: "/login",
    name: "Login",
    component: Login
  },
  {
    path: "/user",
    name: "User",
    component: User,
    meta: { level: 1 } // 用户页面需要的权限等级为 1
  },
  {
    path: "/admin",
    name: "Admin",
    component: Admin,
    meta: { level: 2 } // 管理员页面需要的权限等级为 2
  },
  {
    path: "/manager",
    name: "Manager",
    component: Manager,
    meta: { level: 2 } // 经理页面需要的权限等级为 2
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

2. 实现登录逻辑

接下来，我们需要实现登录逻辑。在登录成功后，需要将登录用户的权限等级存储到本地存储中，以便后续使用。

// Login.vue
<template>
  <form @submit.prevent="login">
    <input type="text" v-model="username" placeholder="用户名" />
    <input type="password" v-model="password" placeholder="密码" />
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      // 假设三个账号的密码都为 123456
      if (
        (this.username === "user" || this.username === "admin" || this.username === "manager") &&
        this.password === "123456"
      ) {
        // 登录成功，将权限等级存储到本地存储中
        localStorage.setItem("level", this.username === "admin" ? 2 : 1);
        this.$router.push({ name: this.username });
      } else {
        alert("用户名或密码错误");
      }
    }
  }
};
</script>

3. 实现路由守卫

最后，我们需要实现路由守卫，用于检查用户是否有访问当前页面的权限。在路由跳转前，会先执行路由守卫中的逻辑，根据用户的权限等级来判断是否允许访问。

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

router.beforeEach((to, from, next) => {
  const level = localStorage.getItem("level");

  if (to.meta.level > level) {
    // 如果当前路由需要的权限等级大于用户的权限等级，则跳转到登录页
    next({ name: "Login" });
  } else {
    // 否则，放行
    next();
  }
});

createApp(App).use(router).mount("#app");

至此，我们就实现了在 Vue3 中使用路由守卫实现权限登录的功能。