假如 有三账号（Aokace,Admin,Aokmgr）密码默认是 账号字符后添加123，首页（“/”）需要登录才能访问（首页下有四个次级页面，分别为 News Aokace Admin Manager （ children:[ { path:'/News', }, { path:'/Aokace', }, { path:'/Admin', }, { path:'/Manager', }, ） ） 默认初始跳到登录页面 登录过后跳转到首页 三个账号有对应的页面（个人页面为首页下的二级页面）同时三个账号权限不同 Aokace可以访问 Admin与Manager的页，而Admin与Manager 只能访问自己对应的页面 则在vue3 如何实现权限登录 <template> <div class="login"> <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon > <el-form-item> <div class="text"> <h1>奥格森评分系统</h1> </div> </el-form-item> <el-form-item > <el-input v-model="ruleForm.username" placeholder="请输入账号" /> </el-form-item> <el-form-item > <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" show-password /> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(ruleFormRef)"> Create </el-button> </el-form-item> </el-form> </div> </template> <script setup> </script> 登录接口文件为 （ import system from "@/utils/index"; export const login = (data) =>{ return system({ url:'/login', method:'post', data }) } ）

首先，在路由配置中，需要将首页和次级页面的访问设置为需要登录，可以使用路由守卫实现：

const routes = [
  {
    path: '/',
    component: Home,
    meta: {
      requireAuth: true
    },
    children: [
      {
        path: 'News',
        component: News,
        meta: {
          requireAuth: true
        }
      },
      {
        path: 'Aokace',
        component: Aokace,
        meta: {
          requireAuth: true
        }
      },
      {
        path: 'Admin',
        component: Admin,
        meta: {
          requireAuth: true
        }
      },
      {
        path: 'Manager',
        component: Manager,
        meta: {
          requireAuth: true
        }
      }
    ]
  }
]

然后，在登录页面中，需要在点击登录按钮时，通过接口请求验证账号密码，并根据验证结果进行相关处理。可以在`<script setup>`中编写相关代码：

<script setup>
import { reactive } from 'vue'
import { login } from '@/api/login'
import { useRouter } from 'vue-router'

const router = useRouter()

const ruleForm = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const submitForm = async (formRef) => {
  try {
    await formRef.validate()
    const res = await login(ruleForm)
    if (res.data.code === 0) {
      // 登录成功，保存token和用户信息
      localStorage.setItem('token', res.data.token)
      localStorage.setItem('user', JSON.stringify(res.data.user))
      // 根据用户角色跳转到对应页面
      if (res.data.user.role === 'Aokace') {
        router.push('/Aokace')
      } else if (res.data.user.role === 'Admin') {
        router.push('/Admin')
      } else if (res.data.user.role === 'Aokmgr') {
        router.push('/Manager')
      }
    } else {
      // 登录失败，提示错误信息
      this.$message.error(res.data.msg)
    }
  } catch (error) {
    console.log(error)
  }
}
</script>

在以上代码中，`login`方法是一个异步接口请求，用来验证账号密码是否正确。请求成功后，会将返回的token和用户信息保存在localStorage中，然后根据用户角色跳转到对应页面。如果验证失败，则提示错误信息。

最后，在需要校验登录状态的页面中，可以使用路由守卫进行校验，如果未登录，则跳转到登录页面：

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next({
        path: '/login'
      })
    }
  } else {
    next()
  }
})

以上就是在Vue3中实现权限登录的方法。