vue3 路由访问权限

在 Vue3 中，我们可以通过导航守卫来实现路由的访问权限控制。导航守卫是 Vue Router 提供的一种功能，它可以在页面跳转之前进行一些操作，如检查用户是否有权限访问该页面。Vue Router 提供了三种导航守卫：

- 全局前置守卫：`router.beforeEach`
- 全局解析守卫：`router.beforeResolve`
- 全局后置守卫：`router.afterEach`

一般我们可以在全局前置守卫中进行路由访问权限的控制，下面是一个简单的示例：

1. 在 `src/router` 目录下创建 `index.js` 文件，添加路由配置：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      requiresAuth: true // 需要登录才能访问
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

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

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const user = sessionStorage.getItem('user')
  if (to.meta.requiresAuth && !user) {
    // 需要登录才能访问，但用户未登录
    next('/login')
  } else {
    next()
  }
})

export default router

在路由配置中，我们定义了两个路由，其中 `/` 路由需要登录才能访问，因此在 `meta` 中添加了 `requiresAuth: true` 属性。在全局前置守卫中，我们获取到当前用户的登录状态，如果需要登录才能访问的页面但用户未登录，则跳转到登录页面；否则直接进入下一个路由。

2. 在需要实现路由访问权限的页面组件中，可以使用 `meta` 中的 `requiresAuth` 属性来进行一些特定的操作，例如隐藏某些按钮、显示登录用户的信息等等。

<template>
  <div>
    <h1>欢迎访问首页</h1>
    <p v-if="$route.meta.requiresAuth">当前用户：{{ user }}</p>
  </div>
</template>

<script>
export default {
  setup() {
    const user = sessionStorage.getItem('user')

    return {
      user
    }
  }
}
</script>

以上就是一个简单的 Vue3 路由访问权限控制的实现方式，仅供参考。需要注意的是，这里的路由访问权限控制仅仅是一个示例，实际场景中可能需要更复杂的逻辑处理。