使用 Vue 3 实现 基于身份的权限验证

在Vue 3中，可以通过使用路由守卫和状态管理来实现基于身份的权限验证。

1:首先，你需要在Vue项目中安装vue-router和vuex（用于状态管理）：

npm install vue-router vuex

2:创建一个路由配置文件 router.js，并配置你的路由规则和权限需要验证的路由：

import { createRouter, createWebHistory } from 'vue-router';
const routes = [
  // 公共页面，无需验证
  { path: '/login', component: Login },
  { path: '/register', component: Register },

  // 需要权限验证的页面
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true } // 标记需要身份验证
  },
  // 其他路由配置...
];

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

export default router;

3:创建一个状态管理文件 store.js，使用vuex来管理用户信息和权限：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    user: null // 用户信息
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    login({ commit }, user) {
      // 在这里进行登录验证，验证通过后将用户信息保存到 state 中
      commit('setUser', user);
    },
    logout({ commit }) {
      // 在这里执行登出操作，清除用户信息
      commit('setUser', null);
    }
  }
});

export default store;

4:在主入口文件 main.js 中引入路由配置和状态管理，并在路由守卫中进行权限验证：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router.js';
import store from './store.js';

// 路由前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.user) {
    // 需要验证且用户未登录，跳转到登录页
    next('/login');
  } else {
    next(); // 继续路由跳转
  }
});

createApp(App)
  .use(router)
  .use(store)
  .mount('#app');

5:在需要进行权限验证的组件中，可以通过访问$store属性获取用户信息进行进一步判断：

<template>
  <div>
    <h1>Welcome, {{ $store.state.user.name }}</h1>
    <p>This is a protected dashboard page.</p>
    <!-- 页面内容 -->
  </div>
</template>