已知后端为springboot + security ， 在数据库在存在user表 表结构这段为: [ userid authority'权限' role'角色' username'用户名' password'密码' ...... ] 后端登录路径为"/login"； 前端请求封装文件 axios.js为： import axios from "axios"; const system = axios.create({ baseURL:'http://localhost:8088', changeOriging:true, }); export default system; api login.js文件为: import system from "@/utils"; export const login = (data) =>{ return system({ url:'/login', method:'post', data }) } 在vue3中如何 实现权限登录 不同的账号访问不同的路径 （ 如 账号admin 密码：123456； 登录时可以访问所有页面， 账号 user 密码：123456； 登录时 直接跳到 /user路径 无权访问包括首页在内的其他非/user路径页面 ） , 可以考虑使用element-plus 组件内script使用<script setup>

实现权限登录不同账号访问不同路径的具体方法如下：

1. 在后端添加一个接口，用于获取当前登录用户的权限信息，例如返回一个包含用户角色和权限列表的 JSON 对象。

2. 在前端登录成功后，调用该接口获取当前用户的权限信息，并将其存储在 Vuex 中或者本地存储中，方便在各个组件中使用。

3. 在 Vue Router 中定义路由时，根据用户权限动态生成路由，例如：

   const routes = [
     {
       path: '/admin',
       component: AdminComponent,
       meta: { roles: ['admin'] }
     },
     {
       path: '/user',
       component: UserComponent,
       meta: { roles: ['user'] }
     },
     {
       path: '/',
       component: HomeComponent
     },
     {
       path: '/404',
       component: NotFoundComponent
     },
     {
       path: '*',
       redirect: '/404'
     }
   ]

在该路由配置中，每个路由都有一个 `meta` 属性，用于存储该路由需要的权限信息。例如，`/admin` 路由需要 `admin` 角色才能访问，因此 `meta.roles` 属性为 `['admin']`。

4. 在路由跳转时，检查当前用户是否有权限访问该路由，如果没有，则跳转到 403 页面或者其他提示页面。例如，在 Vue Router 中可以使用 `beforeEach` 钩子来进行权限判断，例如：

   router.beforeEach((to, from, next) => {
     const roles = store.getters.roles
     if (to.meta.roles && !to.meta.roles.includes(roles)) {
       next('/403')
     } else {
       next()
     }
   })

在该钩子中，首先根据当前用户的权限信息获取其角色列表，然后判断当前路由的 `meta.roles` 属性是否包含该角色列表，如果不包含，则跳转到 403 页面，否则继续进行路由跳转。

5. 在页面中使用 Element Plus 的权限指令来控制页面元素的显示和隐藏。例如，在模板中可以这样使用：

   <el-button v-permission="'admin'" @click="doSomething()">Admin Only</el-button>

在该代码中，`v-permission` 指令用于指定该按钮需要的权限，例如 `'admin'`，如果当前用户没有该权限，则该按钮将被隐藏起来。