基于Vue.js Cookie的用户权限管理：能否通过Cookie实现仅超级用户可删除用户的功能？

当然可以用Cookie来实现这个权限控制逻辑，但得先明确一个核心原则：前端的权限控制只是UI层面的友好限制，后端必须做二次校验——这是保障安全的关键，绝对不能忽略。

具体实现步骤 #

1. 后端配合设置权限Cookie

用户登录成功后，后端需要将用户的角色信息（比如superuser或staff）写入Cookie。注意：如果需要前端读取这个Cookie，不要设置HttpOnly属性；如果追求更高安全性（防止XSS窃取Cookie），可以把角色信息放在JWT中并存入HttpOnly的Cookie，同时在登录接口的响应体里返回角色，前端将角色存入Vuex或localStorage做UI判断（不过你问的是Cookie，这里先讲直接用Cookie的方案）。

2. 封装Cookie读取工具函数

在Vue项目里写一个通用的读取Cookie的函数，方便在组件或路由中调用：

// utils/cookie.js
export function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  return null;
}

3. 组件内控制删除按钮的显示/可用状态

在用户列表组件中，根据Cookie中的角色判断是否显示删除按钮，或者禁用按钮：

<template>
  <div class="user-list">
    <div v-for="user in userList" :key="user.id" class="user-item">
      <span>{{ user.name }}</span>
      <!-- 仅超级用户可见删除按钮 -->
      <button 
        v-if="isSuperuser" 
        @click="handleDelete(user.id)"
        class="delete-btn"
      >
        删除用户
      </button>
    </div>
  </div>
</template>

<script>
import { getCookie } from '@/utils/cookie';

export default {
  data() {
    return {
      userList: []
    };
  },
  computed: {
    isSuperuser() {
      return getCookie('user_role') === 'superuser';
    }
  },
  methods: {
    async handleDelete(userId) {
      // 调用删除接口前再次校验角色（双重保险）
      if (!this.isSuperuser) {
        this.$message.error('您无权限执行此操作');
        return;
      }
      try {
        await this.$axios.delete(`/api/users/${userId}`);
        this.$message.success('删除成功');
        // 更新用户列表
        this.userList = this.userList.filter(u => u.id !== userId);
      } catch (err) {
        this.$message.error('删除失败');
      }
    }
  }
};
</script>

4. 路由层面的权限拦截（可选）

如果有单独的删除用户页面，或者某些路由仅允许超级用户访问，可以用Vue Router的导航守卫做拦截：

// router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import { getCookie } from '@/utils/cookie';

Vue.use(VueRouter);

const routes = [
  {
    path: '/users/:id/delete',
    name: 'UserDelete',
    component: () => import('../views/UserDelete.vue'),
    meta: { requireSuperuser: true } // 标记需要超级用户权限
  },
  // 其他路由...
];

const router = new VueRouter({ routes });

router.beforeEach((to, from, next) => {
  const userRole = getCookie('user_role');
  // 如果路由需要超级用户权限，但当前用户不是，则跳转到无权限页面
  if (to.meta.requireSuperuser && userRole !== 'superuser') {
    next('/forbidden');
  } else {
    next();
  }
});

export default router;

最重要的安全提醒 #

前端的权限控制只是给用户友好的UI限制，任何敏感操作（比如删除用户）必须在后端做严格校验。比如后端处理删除请求时，要从Session（或JWT）中重新获取用户角色，确认是superuser后才执行删除逻辑——因为用户可以通过修改Cookie、伪造请求等方式绕过前端的限制，后端校验才是最后一道防线。

内容的提问来源于stack exchange，提问作者su-wan Kenobi