在vue3 项目中如何利用router store 实现权限登录 不同的账号访问不同的路径（如 账号admin 密码：123456；账号user 密码abcdef） 组件内script使用<script setup>

在Vue3中，可以使用`router`和`store`来实现权限登录和不同账号访问不同路径的功能。具体实现步骤如下：

1. 在`router`中定义需要进行权限控制的路由，例如：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: { requiresAuth: true, roles: ['admin', 'user'] }
  },
  {
    path: '/admin',
    name: 'Admin',
    component: () => import('@/views/Admin.vue'),
    meta: { requiresAuth: true, roles: ['admin'] }
  },
  {
    path: '/user',
    name: 'User',
    component: () => import('@/views/User.vue'),
    meta: { requiresAuth: true, roles: ['user'] }
  }
]

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

export default router

其中，`meta`属性中的`requiresAuth`表示该路由是否需要登录权限，`roles`表示该路由所允许的角色列表。

2. 在`store`中定义用户信息和登录状态，例如：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    user: null,
    isLoggedIn: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setLoggedIn(state, isLoggedIn) {
      state.isLoggedIn = isLoggedIn
    }
  },
  actions: {
    login({ commit }, { username, password }) {
      // 模拟登录请求
      if (username === 'admin' && password === '123456') {
        commit('setUser', { username: 'admin', role: 'admin' })
        commit('setLoggedIn', true)
      } else if (username === 'user' && password === 'abcdef') {
        commit('setUser', { username: 'user', role: 'user' })
        commit('setLoggedIn', true)
      } else {
        commit('setUser', null)
        commit('setLoggedIn', false)
      }
    },
    logout({ commit }) {
      commit('setUser', null)
      commit('setLoggedIn', false)
    }
  },
  getters: {
    currentUser(state) {
      return state.user
    },
    isLoggedIn(state) {
      return state.isLoggedIn
    }
  }
})

export default store

其中，`state`中的`user`表示当前登录用户信息，`isLoggedIn`表示是否已登录。`mutations`中的`setUser`和`setLoggedIn`用于更新状态，`actions`中的`login`和`logout`分别用于登录和注销操作，`getters`中的`currentUser`和`isLoggedIn`分别用于获取当前用户和登录状态。

3. 在组件内使用`<script setup>`语法，例如：

<template>
  <div v-if="isLoggedIn">
    <h1>Welcome, {{ currentUser.username }}!</h1>
    <button @click="logout">Logout</button>
  </div>
  <div v-else>
    <input v-model="username" placeholder="Username">
    <input v-model="password" placeholder="Password">
    <button @click="login">Login</button>
  </div>
</template>

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

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

const username = ref('')
const password = ref('')

const login = () => {
  store.dispatch('login', { username: username.value, password: password.value })
}

const logout = () => {
  store.dispatch('logout')
  router.push('/login')
}

const currentUser = computed(() => store.getters.currentUser)
const isLoggedIn = computed(() => store.getters.isLoggedIn)

watch(isLoggedIn, (newValue) => {
  if (!newValue) {
    router.push('/login')
  }
})

watch(currentUser, (newValue) => {
  if (newValue && router.currentRoute.value.path === '/login') {
    router.push('/')
  }
})
</script>

其中，`useStore`和`useRouter`用于获取`store`和`router`实例。`username`和`password`用于双向绑定登录表单中的输入框，`login`和`logout`分别调用`store`中的`login`和`logout`方法。`currentUser`和`isLoggedIn`分别计算当前用户和登录状态，并使用`watch`监听状态变化。如果未登录，则跳转到登录页面；如果已登录，则自动跳转到对应角色的首页。

注意：以上代码仅供参考，具体实现可能需要根据实际需求进行调整。