「从零开始的 Vue 3 系列」：第九章——vue3中实‘动态路由‘与“权限管理“
前言
本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。
**思路：**动态路由实现就是前端登录获取用户信息->后端验证与权限获取->返回权限数据->前端动态生成路由–>权限控制
那么项目中是如何实现呢：
定义基础路由
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{ path: '/', component: Home },
{ path: '/login', component: Login },
// 其他公共路由
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
在用户登录时，从后端获取用户的权限数据。权限数据通常包含用户可以访问的路由或角色信息。
动态路由与菜单权限：
动态添加路由（一般是菜单权限）：
根据从后端获取的权限数据，使用 Vue Router 的 addRoute 方法动态添加路由。例如：
方法一般都要挂在到main.js中，可以将动态路由方法写到新建的js中，然后将这个js引入进main.js
function addDynamicRoutes(permissions) {
const dynamicRoutes = permissions.map(permission => {
return {
path: permission.path,
component: () => import(`../views/${permission.component}`),
};
});
dynamicRoutes.forEach(route => {
//这里使用addRoute添加到路由
router.addRoute(route);
});
}
设置路由守卫：
使用路由守卫（如 beforeEach）来验证用户是否有权限访问某个路由。如果没有权限，可以重定向到登录页面或错误页面。
router.beforeEach((to, from, next) => {
const isAuthenticated = // 判断用户是否已认证
const hasPermission = // 判断用户是否有访问该路由的权限
if (!isAuthenticated && to.path !== '/login') {
next('/login');
} else if (isAuthenticated && !hasPermission) {
next('/403'); // 无权限页面
} else {
next();
}
});
按钮权限：
1.基于指令的权限控制
你可以创建自定义指令来控制按钮的显示或禁用，这样可以在模板中方便地使用。
const app = Vue.createApp({});
app.directive('permission', {
mounted(el, binding) {
const userPermissions = binding.instance.$data.userPermissions; // 假设从组件实例中获取用户权限
if (!userPermissions.includes(binding.value)) {
el.style.display = 'none'; // 隐藏没有权限的按钮
}
}
});
app.component('my-component', {
data() {
return {
userPermissions: ['view', 'edit'] // 用户权限示例
};
},
template: `
<button v-permission="'edit'">Edit</button>
<button v-permission="'delete'">Delete</button>
`
});
app.mount('#app');
2.使用 Vuex 进行权限管理
在更复杂的应用中，可能需要使用 Vuex 来集中管理用户权限，并在组件中获取权限状态。
const store = Vuex.createStore({
state() {
return {
userPermissions: ['view', 'edit']
};
},
getters: {
hasPermission: (state) => (permission) => {
return state.userPermissions.includes(permission);
}
}
});
const app = Vue.createApp({
computed: {
canEdit() {
return this.$store.getters.hasPermission('edit');
},
canDelete() {
return this.$store.getters.hasPermission('delete');
}
},
template: `
<button v-if="canEdit">Edit</button>
<button v-if="canDelete">Delete</button>
`
});
app.use(store).mount('#app');
3.使用计算属性或方法
在模板中使用计算属性或方法来决定按钮是否显示或禁用。
const app = Vue.createApp({
data() {
return {
userPermissions: ['view', 'edit'] // 用户权限示例
};
},
methods: {
hasPermission(permission) {
return this.userPermissions.includes(permission);
}
},
template: `
<button v-if="hasPermission('edit')">Edit</button>
<button v-if="hasPermission('delete')">Delete</button>
`
});
app.mount('#app');
4.基于组件封装
你可以创建一个权限按钮组件，内部包含权限逻辑，方便在应用中多次复用。
app.component('permission-button', {
props: ['permission'],
template: `
<button v-if="hasPermission">{{ permission }}</button>
`,
computed: {
hasPermission() {
return this.$root.userPermissions.includes(this.permission); // 假设从根实例获取用户权限
}
}
});
// 在根实例中定义用户权限
const app = Vue.createApp({
data() {
return {
userPermissions: ['view', 'edit']
};
},
template: `
<permission-button permission="edit"></permission-button>
<permission-button permission="delete"></permission-button>
`
});
app.mount('#app');
总结：根据应用的复杂程度，你可以选择以上不同的方法来实现按钮权限控制。对于简单的权限检查，自定义指令或计算属性可能就足够了；而对于复杂的权限系统，可以考虑使用 Vuex 或封装组件的方式。这样不仅可以提高代码的可维护性，还可以保持代码的可读性和复用性。
ps:以上内容仅为本人对 vue3的个人理解，如有不足之处，欢迎大家指正与交流，共同进步。
原文地址：https://blog.csdn.net/llfxq/article/details/142880746
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！