要重视咱网站里的用户权限管理！知道哪些人能做什么事，才能让整个系统安稳运行。现在有了Vue3、TypeScript还有Vite这些强力工具，管理用户权限变得如鱼得水了，工作效率瞬间提升，用户体验自然也跟着上来了。下面我给大家分享几个好用的招数和实战例子，帮你顺利搞定在Vue3+TS+Vite项目中的用户权限管理问题。
定义角色和权限
设置权限，先搞懂什么叫角色啊（比如admin,user之类的）还有权益（搞创作、更新、删东西那些），这个弄透了后面给权限管理就省力多了。
创建权限指令
想让Vue组件中的元素随心所欲地显隐？挺容易的！我们只需要做一个能看懂用户权限的指令。然后，我们就能根据用户角色和权限决定哪些元素出镜，哪些藏起来。这样，整个系统就变得容易操控了！下面就教你怎么做这个超实用的权限指令：
typescript
直接用'vue'来导入'Directive'这个东东。
这“permission”指令就是用来解决权限问题的！
mounted(el,binding){
授权就是我们常说的角色和权限，看看你拿到的是什么。
//根据role和permission检查用户是否有权限
//根据检查结果设置元素显示或隐藏
// roles.ts
export enum Role {
Admin = 'admin',
User = 'user',
}
// permissions.ts
export enum Permission {
Create = 'create',
Update = 'update',
Delete = 'delete',
}
},
};
这里就是那个权限指令文件，给普通用户用的。
注册权限指令
只需要在应用首页设个权限规矩，那全应用就搞定了！这样一搞，咱们在Vue组件里就可以轻而易举地用起来。
// directives/permission.ts
import { Directive, DirectiveBinding } from 'vue'
import { Role, Permission } from '@/constants/roles'
const permissionDirective: Directive = (el: HTMLElement, binding: DirectiveBinding) => {
const { value } = binding
const userRole = 'admin' // 这里假设用户角色为admin，实际开发中需要根据实际情况获取
// 在这里检查用户权限和角色，决定是否展示元素
if (value) {
const [requiredRole, requiredPermission] = value.split('.')
if (
(requiredRole && requiredRole !== userRole) ||
(requiredPermission && !hasPermission(userRole, requiredPermission))
) {
el.style.display = 'none'
}
}
}
const hasPermission = (role: Role, permission: Permission): boolean => {
// 在这里根据角色和权限检查用户是否有权限
// 实际开发中，可以从后端接口获取用户角色和权限，并做相应的校验
return true
}
export default permissionDirective
使用权限指令
在Vue组件中，只要用上已经注册好的权限指令，就能控制元素是否显示！只需要在模板那里加上指令参数，你想怎么控权限都可以！举个例子：
“`html
只有管理员才能看到此内容
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import permissionDirective from '@/directives/permission'
const app = createApp(App)
app.directive('permission', permissionDirective)
app.mount('#app')
普通用户也有特权</button>
首先，我们要明确一下这个游戏的玩法！想要看到前文，你得成为’admin’或者’trade’才有资格；然后，想要碰到那个蓝色按钮，那你就得先拥有’stock’和’buy’这两个权限了。
动态路由权限管理
咱们做项目时得看角色和权限来动态设路由，别小瞧这点，挺关键的！这时候路由导航守卫就要登场了，当你要切换页面时，它会先看看你有没有权限，如果没权，那就添个新路由或直接带你回原位，这样无论你在哪儿都能方便地使用各种功能。接下来我就以VueRouter为例，教大家如何搞定动态路由权限管理吧：
先确认下地图，这样才能知道我们去哪儿（to,from,next）。瞧，就用这个小玩意儿试试看能否跳过障碍物哈。
仅管理员可见
仅普通用户可见
直接问问他们是不是在网页上登录过，有个方法叫’checkIsAuthenticated()’。
if(isAuthenticated){
先搞清楚这哥们啥身份呗，userRole()这个函数就能帮到你。
想玩哪个角色你看着这儿的to.meta.requiredRoles就对了！
如果有要求角色，但是用户角色不对的话，就不让他进。
直接跳转到”出错了”那个界面，然后设置它的代码为403。
}else{
next();//继续加载所请求路由
}
}else{
// router.ts
import { createRouter, createWebHistory } from 'vue-router'
import { Role, Permission } from '@/constants/roles'
import { hasPermission } from '@/utils/permission'
const routes = [
{
path: '/admin',
name: 'admin',
component: () => import('@/views/Admin.vue')
meta: {
requiresAuth: true,
requiredRoles: [Role.Admin],
},
},
// ...
]
const router = createRouter({
history: createWebHistory(),
routes,
})
router.beforeEach((to, from, next) => {
const isLoggedIn = true // 假设用户已登录，实际开发中需要根据实际情况获取
if (to.meta.requiresAuth && !isLoggedIn) {
next('/login')
} else {
const userRole = 'admin' // 这里假设用户角色为admin，实际开发中需要根据实际情况获取
if (to.meta.requiredRoles && !hasPermission(userRole, to.meta.requiredRoles)) {
next('/error')
} else {
next()
}
}
})
export default router
点下一个叫“login”的地方，就会转到登录界面！
}
});
这个代码好简单！就是看看有没有人登录，再比比他/她的角色跟路由是不是匹配。要是配对了，就加载那个路由；不对，那就转向错误页或者登录页。
用Vue3、TypeScript还有Vite这几个好用的工具，轻松搞定用户权限管理。首先设定角色和权限，按照自己需求定制命令，再来搞搞动态路由，这样就大功告成！这下子，我们的系统既安全又好用，还不赖？
刚刚那事儿，你肯定也知道怎么设定Vue3+TS+Vite项目的权限了？下次用到可别忘了~
原文链接：https://www.icz.com/technicalinformation/web/2024/04/15520.html，转载请注明出处~~~ 
评论0