Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vue] vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做? #340

Open
haizhilin2013 opened this issue Jun 20, 2019 · 4 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?

@haizhilin2013 haizhilin2013 added the vue vue label Jun 20, 2019
@kkkman22
Copy link

kkkman22 commented Jul 3, 2019

可以通过指令去做
Vue.directive('hasPermission', {
bind(el, binding, vnode) {
const permissions = vnode.context.$store.state.account.permissions
if (binding.value === '') return
const value = binding.value.split(',')
let flag = true
for (const v of value) {
if (!permissions.includes(v)) {
flag = false
}
}
if (!flag) {
if (!el.parentNode) {
el.style.display = 'none'
} else {
el.parentNode.removeChild(el)
}
}
}
}

@guoyiheng
Copy link

guoyiheng commented Jul 29, 2019

按钮级别的权限
https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/permission.html#%E6%8C%87%E4%BB%A4%E6%9D%83%E9%99%90

@meahu
Copy link

meahu commented Feb 18, 2020

如果权限角色是动态的,那么要为每个按钮做标识,根据这个标识去查哪些角色拥有该权限,再根据登录人的权限角色进行显示与否。

@Cai-zhiji
Copy link

Cai-zhiji commented Jul 7, 2023

在Vue中进行权限管理的一种常见方式是结合路由和用户角色来控制页面和组件的访问权限。同时,如果需要控制到按钮级别的权限,可以使用条件渲染和指令来实现。

示例

定义路由和角色权限:
在路由配置中,为每个路由定义所需的角色权限。例如,可以为某个路由设置role属性,表示该路由所需的角色权限。

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: {
      role: 'admin', // 设置路由所需的角色权限
    },
  },
  // ...
];

检查用户权限:
在路由导航守卫中,可以检查用户的角色权限与路由定义的权限是否匹配。如果不匹配,可以进行相应的跳转或显示错误信息。

router.beforeEach((to, from, next) => {
  const requiredRole = to.meta.role;
  const userRole = getUserRole(); // 获取用户角色,可以从后端接口获取

  if (requiredRole && requiredRole !== userRole) {
    // 权限不匹配,跳转到无权限页面或显示错误信息
    next({ name: 'NoAccess' });
  } else {
    // 权限匹配,继续导航
    next();
  }
});

控制按钮级别的权限:
如果需要控制到按钮级别的权限,可以在模板中使用条件渲染和指令来控制按钮的显示和可用状态。

<button v-if="hasButtonPermission" @click="handleButtonClick">按钮</button>

在组件中,通过判断当前用户的角色权限,设置hasButtonPermission变量的值。

export default {
  data() {
    return {
      hasButtonPermission: checkButtonPermission(),
    };
  },
  methods: {
    handleButtonClick() {
      // 处理按钮点击事件
    },
  },
};

通过以上方式,你可以在Vue中实现基于角色的权限管理,控制页面和组件的访问权限,并且可以细粒度地控制到按钮级别的权限。当用户角色发生变化时,你需要相应地更新权限状态并重新渲染组件,以保持权限的正确性。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

5 participants