面试官：怎么进行按钮级别的权限控制？
简介：前几天在给一位同学做面试复盘的时候，他提到了这么一道题“你是怎么在项目中做到按钮级别的权限控制？”，大家知道有哪些方法吗？
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~
大家好，今天的分享由团队的 uncle13 老师提供，以下是正文：
前几天在给一位同学做面试复盘的时候，他提到了这么一道题“你是怎么在项目中做到按钮级别的权限控制？”。这位同学虽然在简历中写到了这块，但是没有好好准备，支支吾吾半天，才说出了使用 if 进行条件判断。
说实话，这样的回答相当减分。
在项目中，有以下几种常见的实现方式：
权限指令：使用指令来控制在页面中出现的按钮是否应该显示或可用。例如，当用户没有特定权限时，可以使用一个指令来禁用或隐藏某些按钮。 权限服务：创建一个权限服务，该服务根据用户角色和其他条件确定用户是否具有权限执行操作。在按钮上添加一个类似 ngIf 的标记，并使用该服务验证用户权限，在需要时显示或隐藏按钮。 路由守卫：使用路由守卫来限制某些页面或操作的访问权限。当用户试图访问受保护的页面或功能时，路由守卫可以检查用户是否具有足够的权限，如果不是，则重定向到其他页面。 后端集成：通过后端 API 将权限绑定到每个按钮，只有在用户请求时才会展示对应按钮。这种方法需要后端支持，因此与后端进行密切合作。
Vue版本
1. 权限指令
v-permission 的指令：Vue.directive('permission', {
bind: function(el, binding, vnode) {
// 获取用户角色
const userRole = 'admin'; // 这里假设用户角色为管理员
// 获取指令参数
const permission = binding.value;
// 如果用户不具备相应权限，则禁用按钮
if (userRole !== permission) {
el.disabled = true;
}
}
});
v-permission 指令，并传递相应的权限参数：<button v-permission="'admin'">只有管理员可以操作</button>
2. 权限服务
const store = new Vuex.Store({
state: {
userRole: 'admin'
},
getters: {
isAdmin: state => {
return state.userRole === 'admin';
}
}
});
$store.getters 访问 isAdmin 来判断用户是否为管理员。例如：<template>
<div>
<button v-if="$store.getters.isAdmin">只有管理员可以操作</button>
</div>
</template>
3. 路由守卫
meta 字段，用于指定该路由需要的权限：const router = new VueRouter({
routes: [
{
path: '/admin',
component: AdminComponent,
meta: { requiresAuth: true }
},
// ...
]
});
router.beforeEach 方法对每个路由进行拦截，判断用户是否具有访问该路由的权限。例如：router.beforeEach((to, from, next) => {
// 获取用户角色
const userRole = 'admin'; // 这里假设用户角色为管理员
// 判断该路由是否需要权限
if (to.matched.some(record => record.meta.requiresAuth)) {
// 如果用户不具备相应权限，则重定向到登录页
if (userRole !== 'admin') {
next('/login');
} else {
next(); // 继续跳转到目标路由
}
} else {
next(); // 不需要权限，直接跳转到目标路由
}
});
/admin 路由就会被重定向到登录页。4. 后端集成
/permissions 接口，用于返回用户具备的所有权限：app.get('/permissions', (req, res) => {
// 获取当前用户 ID
const userId = req.user.id;
// 查询该用户的角色和权限
const userRole = 'admin'; // 假设用户角色为管理员
const userPermissions = ['addUser', 'deleteUser']; // 假设用户具备添加用户和删除用户的权限
// 返回用户角色和权限
res.json({ role: userRole, permissions: userPermissions });
});
axios 或其他 HTTP 客户端库调用该接口，并根据返回的数据决定是否显示或禁用按钮。例如：axios.get('/permissions').then(response => {
// 获取用户角色和权限
const userRole = response.data.role;
const userPermissions = response.data.permissions;
// 根据用户权限控制按钮显示或禁用
if (userPermissions.includes('addUser')) {
this.showAddButton = true;
} else {
this.showAddButton = false;
}
});
axios.get 方法获取用户的角色和权限信息，并根据权限信息决定是否显示或禁用按钮。当用户具备添加用户的权限时，该按钮就会被显示出来。React版本
1. 权限指令
PermissionButton 的组件：function PermissionButton(props) {
// 获取用户角色
const userRole = 'admin'; // 这里假设用户角色为管理员
// 获取组件属性
const { permission, ...rest } = props;
// 根据用户角色判断是否具备相应权限，并设置按钮状态
const disabled = userRole !== permission;
return (
<button disabled={disabled} {...rest}>
{props.children}
</button>
);
}
<PermissionButton permission="admin">只有管理员可以操作</PermissionButton>
2. 权限服务
const PermissionsContext = React.createContext(null);
function PermissionsProvider(props) {
const [userRole, setUserRole] = useState('admin');
const value = useMemo(() => {
return {
userRole,
isAdmin: userRole === 'admin',
setUserRole
};
}, [userRole]);
return (
<PermissionsContext.Provider value={value}>
{props.children}
</PermissionsContext.Provider>
);
}
function usePermissions() {
return useContext(PermissionsContext);
}
usePermissions 钩子函数获取权限信息，并根据用户角色判断是否具备相应权限。例如：function AdminPage(props) {
const { isAdmin } = usePermissions();
return (
<div>
{isAdmin && <button>只有管理员可以操作</button>}
</div>
);
}
3. 路由守卫
react-router-dom 库来进行路由管理，并使用 Route 组件上的 render 属性来指定路由渲染时需要执行的代码。例如，在路由配置中添加一个 requiresAuth 属性，用于指定该路由需要的权限：function App() {
return (
<Router>
<Switch>
<Route path="/admin" requiresAuth component={AdminPage} />
{/* ... */}
</Switch>
</Router>
);
}
Route 组件上使用 render 属性，定义一个函数来判断用户是否具有访问该路由的权限。例如：function App() {
const { userRole } = usePermissions();
function checkAuth(Component, props) {
if (props.route.requiresAuth && userRole !== 'admin') {
return <Redirect to="/login" />;
} else {
return <Component {...props} />;
}
}
return (
<Router>
<Switch>
<Route
path="/admin"
requiresAuth
render={props => checkAuth(AdminPage, props)}
/>
{/* ... */}
</Switch>
</Router>
);
}
/admin 路由就会被重定向到登录页。4. 后端集成
/permissions 接口，用于返回用户具备的所有权限：app.get('/permissions', (req, res) => {
// 获取当前用户 ID
const userId = req.user.id;
// 查询该用户的角色和权限
const userRole = 'admin'; // 假设用户角色为管理员
const userPermissions = ['addUser', 'deleteUser']; // 假设用户具备添加用户和删除用户的权限
// 返回