已知后端为springboot + security 在数据库在存在user表 表结构为: [ userid authority role username password 1 管理者 admin admins 123456 2 高级管理 user User 654321 3 普通管理 manag Manag 567890 ] 后端登录路径为"/login"； 前端请求封装文件 axios.js为： import axios from "axios"; const system = axios.create({ baseURL:'http://localhost:8088', changeOriging:true, }); export default system; 在vue3中如何利用router store 实现权限登录 不同的账号访问不同的路径 （ 如 账号admin 密码：123456； 账号user 密码abcdef ） 组件内script使用<script setup>

在组件内的`<script setup>`中，可以利用router和store来实现权限登录和不同账号访问不同路径的需求。具体实现步骤如下：

1. 在store中定义一个state，用于存储当前登录用户的信息，例如：

const state = {
  currentUser: null
};

2. 在store中定义一个action，用于处理登录逻辑，例如：

const actions = {
  login({ commit }, { username, password }) {
    return system.post('/login', { username, password }).then(response => {
      const { userid, authority, role } = response.data;
      commit('setCurrentUser', { userid, authority, role });
    });
  }
};

其中，`system`是前面封装好的axios实例，用于发送登录请求。登录成功后，将响应数据中的`userid`、`authority`和`role`存储到state中的`currentUser`中。

3. 在store中定义一个getter，用于获取当前登录用户的角色信息，例如：

const getters = {
  currentUserRole(state) {
    return state.currentUser ? state.currentUser.role : null;
  }
};

4. 在路由配置中，定义需要进行权限控制的路由和对应的角色信息，例如：

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    meta: { roles: ['admin'] }
  },
  {
    path: '/user',
    component: UserComponent,
    meta: { roles: ['user', 'admin'] }
  },
  {
    path: '/manag',
    component: ManagComponent,
    meta: { roles: ['manag', 'user', 'admin'] }
  }
];

其中，`meta`属性用于存储路由的元数据信息，这里存储了需要访问该路由需要的角色信息。

5. 在路由配置中，定义一个全局前置守卫，用于进行权限校验，例如：

router.beforeEach((to, from, next) => {
  const requiredRoles = to.meta.roles;
  const currentUserRole = store.getters.currentUserRole;
  if (requiredRoles && requiredRoles.indexOf(currentUserRole) === -1) {
    next('/login');
  } else {
    next();
  }
});

该守卫会在每个路由跳转前进行校验，如果当前用户的角色信息不满足路由的要求，就跳转到登录页面。

6. 在组件中，调用store中的登录action进行登录，例如：

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

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

const router = useRouter();
const store = useStore();

const handleSubmit = () => {
  store.dispatch('login', { username: state.username, password: state.password }).then(() => {
    router.push('/');
  });
};
</script>

这里使用了`reactive`来定义响应式数据，`useRouter`来获取路由实例，`useStore`来获取store实例。当用户提交登录表单时，调用store中的登录action进行登录，并在登录成功后跳转到首页。

以上就是利用router和store实现权限登录和不同账号访问不同路径的步骤，希望能对你有所帮助。