原生js怎么控制权限的

原生JS控制权限的方法有：基于用户角色的权限控制、基于功能的权限控制、基于路由的权限控制、基于元素的权限控制。 其中，基于用户角色的权限控制 是最常见的方法，通过定义不同的用户角色并赋予不同的权限，可以实现对用户操作的细粒度控制。接下来，我们将详细介绍这种方法，并探讨其他几种方法。

一、基于用户角色的权限控制

1. 定义用户角色

在实现基于用户角色的权限控制之前，首先需要定义不同的用户角色。通常情况下，用户角色可以分为管理员、普通用户、访客等，每种角色具有不同的操作权限。例如，管理员可以进行所有操作，而普通用户和访客的权限则有限。

const roles = {
    admin: 'admin',
    user: 'user',
    guest: 'guest'
};

2. 为角色分配权限

为每个角色分配相应的权限。可以通过一个权限表来管理不同角色的权限。这里我们用一个简单的对象来表示：

const permissions = {
    [roles.admin]: ['read', 'write', 'delete'],
    [roles.user]: ['read', 'write'],
    [roles.guest]: ['read']
};

3. 检查权限

接下来，需要编写一个函数来检查某个角色是否具有执行某个操作的权限。

function hasPermission(role, action) {
    return permissions[role].includes(action);
}
// 示例
console.log(hasPermission(roles.admin, 'delete')); // true
console.log(hasPermission(roles.user, 'delete'));  // false

4. 控制前端显示

基于权限控制，可以在前端页面中显示或隐藏特定的元素。例如：

document.addEventListener('DOMContentLoaded', function() {
    const userRole = roles.user;  // 假设当前用户角色是普通用户
    const deleteButton = document.getElementById('deleteButton');
    if (!hasPermission(userRole, 'delete')) {
        deleteButton.style.display = 'none';
    }
});

二、基于功能的权限控制

1. 定义功能模块

基于功能的权限控制，首先需要定义不同的功能模块。可以用一个对象来表示不同的功能模块：

const features = {
    createPost: 'createPost',
    editPost: 'editPost',
    deletePost: 'deletePost'
};

2. 为角色分配功能权限

为每个角色分配相应的功能权限：

const featurePermissions = {
    [roles.admin]: [features.createPost, features.editPost, features.deletePost],
    [roles.user]: [features.createPost, features.editPost],
    [roles.guest]: []
};

3. 检查功能权限

编写一个函数来检查某个角色是否具有访问某个功能的权限：

function hasFeaturePermission(role, feature) {
    return featurePermissions[role].includes(feature);
}
// 示例
console.log(hasFeaturePermission(roles.admin, features.deletePost)); // true
console.log(hasFeaturePermission(roles.guest, features.createPost)); // false

4. 控制功能访问

基于功能权限，可以控制用户对特定功能的访问。例如：

document.addEventListener('DOMContentLoaded', function() {
    const userRole = roles.user;  // 假设当前用户角色是普通用户
    const createPostButton = document.getElementById('createPostButton');
    if (!hasFeaturePermission(userRole, features.createPost)) {
        createPostButton.style.display = 'none';
    }
});

三、基于路由的权限控制

1. 定义路由

在单页面应用（SPA）中，可以通过定义不同的路由来管理页面访问。假设我们有以下路由：

const routes = {
    home: '/',
    dashboard: '/dashboard',
    settings: '/settings'
};

2. 为角色分配路由权限

为每个角色分配相应的路由访问权限：

const routePermissions = {
    [roles.admin]: [routes.home, routes.dashboard, routes.settings],
    [roles.user]: [routes.home, routes.dashboard],
    [roles.guest]: [routes.home]
};

3. 检查路由权限

编写一个函数来检查某个角色是否具有访问某个路由的权限：

function hasRoutePermission(role, route) {
    return routePermissions[role].includes(route);
}
// 示例
console.log(hasRoutePermission(roles.admin, routes.settings)); // true
console.log(hasRoutePermission(roles.guest, routes.dashboard)); // false

4. 控制路由访问

在前端路由系统中，可以基于权限控制用户对特定页面的访问。例如：

function navigateTo(route) {
    const userRole = roles.user;  // 假设当前用户角色是普通用户
    if (hasRoutePermission(userRole, route)) {
        window.location.href = route;
    } else {
        alert('Access Denied');
    }
}
// 示例
document.getElementById('settingsLink').addEventListener('click', function() {
    navigateTo(routes.settings);
});

四、基于元素的权限控制

1. 定义元素权限

基于元素的权限控制，可以通过定义每个元素的权限来实现。假设我们有以下元素：

const elements = {
    deleteButton: 'deleteButton',
    editButton: 'editButton',
    createButton: 'createButton'
};

2. 为角色分配元素权限

为每个角色分配相应的元素权限：

const elementPermissions = {
    [roles.admin]: [elements.deleteButton, elements.editButton, elements.createButton],
    [roles.user]: [elements.editButton, elements.createButton],
    [roles.guest]: [elements.createButton]
};

3. 检查元素权限

编写一个函数来检查某个角色是否具有显示某个元素的权限：

function hasElementPermission(role, element) {
    return elementPermissions[role].includes(element);
}
// 示例
console.log(hasElementPermission(roles.admin, elements.deleteButton)); // true
console.log(hasElementPermission(roles.guest, elements.editButton)); // false

4. 控制元素显示

基于元素权限，可以在页面中显示或隐藏特定的元素。例如：

document.addEventListener('DOMContentLoaded', function() {
    const userRole = roles.user;  // 假设当前用户角色是普通用户
    const deleteButton = document.getElementById('deleteButton');
    if (!hasElementPermission(userRole, elements.deleteButton)) {
        deleteButton.style.display = 'none';
    }
});

五、总结

通过上述几种方法，我们可以实现基于原生JS的权限控制，包括基于用户角色的权限控制、基于功能的权限控制、基于路由的权限控制、基于元素的权限控制。在实际应用中，可以根据具体需求选择适合的方法，并结合使用以实现更为细粒度的权限控制。为了更好地管理和协作项目，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们可以帮助团队高效地进行权限管理和项目协作。