mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
176 lines
44 KiB
HTML
176 lines
44 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zn-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>权限管理 | Vue Antd Admin</title>
|
||
<meta name="generator" content="VuePress 1.5.2">
|
||
<link rel="icon" href="/favicon.ico">
|
||
<meta name="description" content="Vue Antd Admin">
|
||
<link rel="preload" href="/assets/css/0.styles.566e6543.css" as="style"><link rel="preload" href="/assets/js/app.4044373b.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/10.b3af0ac4.js" as="script"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.9a3bd7bf.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.cf783558.js"><link rel="prefetch" href="/assets/js/16.8cd2d550.js"><link rel="prefetch" href="/assets/js/17.a194e1da.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.58b681da.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.94de0f4c.js"><link rel="prefetch" href="/assets/js/22.be24120c.js"><link rel="prefetch" href="/assets/js/23.e2e4171a.js"><link rel="prefetch" href="/assets/js/24.d3dad329.js"><link rel="prefetch" href="/assets/js/25.936cbc18.js"><link rel="prefetch" href="/assets/js/26.bf7fa383.js"><link rel="prefetch" href="/assets/js/27.4a757523.js"><link rel="prefetch" href="/assets/js/28.fbeefcef.js"><link rel="prefetch" href="/assets/js/29.baa62900.js"><link rel="prefetch" href="/assets/js/3.ed8a83eb.js"><link rel="prefetch" href="/assets/js/30.6397ca35.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.40c5e0e5.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.a8d32d40.js"><link rel="prefetch" href="/assets/js/5.2d98be03.js"><link rel="prefetch" href="/assets/js/6.53f712d2.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.a6aa3458.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||
<link rel="stylesheet" href="/assets/css/0.styles.566e6543.css">
|
||
</head>
|
||
<body>
|
||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||
配置
|
||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||
主题
|
||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||
配置
|
||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||
主题
|
||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" aria-current="page" class="active sidebar-link">权限管理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/advance/authority.html#角色和权限" class="sidebar-link">角色和权限</a></li><li class="sidebar-sub-header"><a href="/advance/authority.html#页面权限" class="sidebar-link">页面权限</a></li><li class="sidebar-sub-header"><a href="/advance/authority.html#操作权限" class="sidebar-link">操作权限</a></li><li class="sidebar-sub-header"><a href="/advance/authority.html#异步路由权限" class="sidebar-link">异步路由权限</a></li></ul></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="权限管理"><a href="#权限管理" class="header-anchor">#</a> 权限管理</h1> <p>权限控制是中后台系统中常见的需求之一，你可以利用 Vue Antd Admin 提供的权限控制脚手架，实现一些基本的权限控制功能。</p> <h2 id="角色和权限"><a href="#角色和权限" class="header-anchor">#</a> 角色和权限</h2> <p>通常情况下有两种方式可以控制用户权限，一种是通过用户角色 role 来控制权限，另一种是通过更细致的权限 permission 来控制。
|
||
这两种方式 Vue Antd Admin 都支持。<br>
|
||
我们定义了 role 和 permission 的基本格式，如果你获取的 role 和 permission 数据格式与 Vue Antd Admin 不一致，
|
||
你需要在获取到 role 和 permission 后将其转换为 Vue Antd Admin 的格式。</p> <h3 id="角色"><a href="#角色" class="header-anchor">#</a> 角色</h3> <p>Vue Antd Admin 的 <code>角色/role</code> 包含 <code>id</code> 和 <code>operation</code> 两个属性。其中 <code>id</code> 为 <code>角色/role</code> 的 id，<code>operation</code> 为 <code>角色/role</code> 具有的操作权限，是一个字符串数组。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>role <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token string">'admin'</span><span class="token punctuation">,</span> <span class="token comment">//角色ID</span>
|
||
operation<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'add'</span><span class="token punctuation">,</span> <span class="token string">'delete'</span><span class="token punctuation">,</span> <span class="token string">'edit'</span><span class="token punctuation">,</span> <span class="token string">'close'</span><span class="token punctuation">]</span> <span class="token comment">//角色的操作权限</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>你也可以设置 role 的值为字符串，比如 role = 'admin', 它等同于：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>role <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token string">'admin'</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="权限"><a href="#权限" class="header-anchor">#</a> 权限</h3> <p>Vue Antd Admin 的 <code>权限/permission</code> 也包含 <code>id</code> 和 <code>operation</code> 两个属性。其中 <code>id</code> 为 <code>权限/permission</code> 的 id，<code>operation</code> 为 <code>权限/permission</code> 下的操作权限，是一个字符串数组。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>permission <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span> <span class="token comment">//权限ID</span>
|
||
operation<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'add'</span><span class="token punctuation">,</span> <span class="token string">'delete'</span><span class="token punctuation">,</span> <span class="token string">'edit'</span><span class="token punctuation">,</span> <span class="token string">'close'</span><span class="token punctuation">]</span> <span class="token comment">//权限下的操作权限</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>你也可以设置 permission 的值为字符串，比如 permission = 'form', 它等同于：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>permission <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token string">'form'</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="设置用户的角色和权限"><a href="#设置用户的角色和权限" class="header-anchor">#</a> 设置用户的角色和权限</h3> <p>你只需为用户配置 roles 和 permissions 两者中的其中一种，即可完成权限管理功能。当然你也可以两者都配置。</p> <p>获取到用户权限或角色后，将其格式化转为 Vue Antd Admin 可用的格式，然后使用 <code>store.commit('account/setPermissions', permissions)</code> 或 <code>store.commit('account/setRoles', roles)</code>
|
||
将其存在本地即可。如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">getPermissions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> permissions <span class="token operator">=</span> res<span class="token punctuation">.</span>data
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'account/setPermissions'</span><span class="token punctuation">,</span> permissions<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
<span class="token function">getRoles</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> roles <span class="token operator">=</span> res<span class="token punctuation">.</span>data
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'account/setRoles'</span><span class="token punctuation">,</span> roles<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>注意，存在本地的 permissions 和 roles 都应该是数组。<br>
|
||
你可以在 /pages/login/Login.vue 查看完整的用户角色和权限设置代码。</p></div> <h2 id="页面权限"><a href="#页面权限" class="header-anchor">#</a> 页面权限</h2> <p>如果你想给一些页面设置准入权限，只需要给该页面对应的路由设置元数据 authority 即可。 authority 的值可以是一个字符串，也可以是对象。</p> <p>如下路由配置，则表明 <code>验权页面</code> 需要准入权限(permission): <code>form</code></p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> route <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'验权页面'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'auth/demo'</span><span class="token punctuation">,</span>
|
||
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
authority<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>下面是 authority 的值为对象的写法，这种写法和上面字符串的写法具有相同的效果：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> route <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'验权页面'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'auth/demo'</span><span class="token punctuation">,</span>
|
||
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
authority<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
permission<span class="token operator">:</span> <span class="token string">'form'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>有时你可能需要通过用户角色来配置页面权限，我们同样支持，用法和上面类似。</p> <p>如下配置，表明 <code>验权页面</code> 需要准入角色(role) <code>admin</code>：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> route <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'验权页面'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'auth/demo'</span><span class="token punctuation">,</span>
|
||
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
authority<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
role<span class="token operator">:</span> <span class="token string">'admin'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>当你未设置 authority 或 设置 authority 的值 为 <code>*</code> 时，等同于该页面无需权限限制，我们会忽略此页面的权限检查。</p></div> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>当 authority 的值为字符串时，会以 <a href="#%E6%9D%83%E9%99%90">权限/permission</a> 验证权限。如果你需要以 <a href="#%E8%A7%92%E8%89%B2">角色/role</a> 验证权限，请以对象形式设置 authority 的值。</p></div> <h2 id="操作权限"><a href="#操作权限" class="header-anchor">#</a> 操作权限</h2> <p>在一些复杂的些场景下，权限可能不仅仅是页面层级这么简单。在一些页面你可能需要校验用户是否具有某些操作的权限，比如 增、删、改、查等。<br>
|
||
为此，我们提供了 <code>权限校验注入</code> 和 <code>权限校验指令</code> 两个实用的功能。</p> <h3 id="权限校验注入"><a href="#权限校验注入" class="header-anchor">#</a> 权限校验注入</h3> <p>通过对Vue组件的实例方法进行 <code>权限校验注入</code>，我们可以控制该实例方法的执行权限，从而精准且安全的验证用户操作。</p> <p>比如，QueryList 页面的 deleteRecord 方法，我们希望具有操作权限 <code>delete</code> 的用户才能调用此方法。
|
||
只需为 <code>deleteRecord</code> 方法注入权限校验，按如下方式配置 <code>authorize</code> 即可：</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
...
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token operator">...</span>
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'QueryList'</span><span class="token punctuation">,</span>
|
||
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
authorize<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//权限校验注入设置</span>
|
||
deleteRecord<span class="token operator">:</span> <span class="token string">'delete'</span> <span class="token comment">//key为需要注入权限校验的方法名，这里为 deleteRecord 方法；值为需要校验的操作权限，这里为 delete 操作权限</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token function">deleteRecord</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>dataSource <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>key <span class="token operator">!==</span> key<span class="token punctuation">)</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>selectedRows <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectedRows<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>key <span class="token operator">!==</span> key<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>如果用户没有 <code>delete</code> 权限，调用 deleteRecord 方法，会看到如下提示：</p> <p><img src="/assets/img/permission.a4be38e9.png" alt="无此权限"></p> <h3 id="操作权限校验的类型"><a href="#操作权限校验的类型" class="header-anchor">#</a> 操作权限校验的类型</h3> <p><code>authorize</code> 会根据当前页面匹配到的权限类型(<a href="#%E6%9D%83%E9%99%90">permission</a> / <a href="#%E8%A7%92%E8%89%B2">role</a>)，来判断是使用 <code>permission.operation</code> 还是 <code>role.operation</code> 来进行权限校验。
|
||
如果当前页面同时匹配到了 permission 和 role 权限，则默认通过 permission.operation 来进行操作权限校验。</p> <p>当然你也可以指定操作权限校验的类型，如下设置即可：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br></div><pre class="language-js"><code>authorize<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
deleteRecord<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//需要 注入权限校验 的方法名：deleteRecord</span>
|
||
check<span class="token operator">:</span> <span class="token string">'delete'</span><span class="token punctuation">,</span> <span class="token comment">//需要校验的操作权限：check</span>
|
||
type<span class="token operator">:</span> <span class="token string">'role'</span> <span class="token comment">//指定操作权限校验的类型，可选 permission 和 role。这里指定以 role.operation 校验操作权限</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="权限校验指令"><a href="#权限校验指令" class="header-anchor">#</a> 权限校验指令</h3> <p>有时我们可能希望用户能够更直观的了解自己的操作权限。比如给没有操作权限的控件应用 disable 样式，禁用 click 事件等。
|
||
我们提供了权限校验指令 <code>v-auth</code> 来实现这个功能。</p> <p>比如，我们想为 QueryList 页面的删除控件进行 <code>delete</code> 操作权限校验，只需为删除控件设置 v-auth="`delete`" 指令即可，如下：</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-card</span><span class="token punctuation">></span></span>...
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>standard-table</span> <span class="token attr-name">...</span><span class="token punctuation">></span></span>
|
||
...
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>action<span class="token punctuation">"</span></span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{text, record}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deleteRecord(record.key)<span class="token punctuation">"</span></span> <span class="token attr-name">v-auth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`delete`<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>delete<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>删除
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
...
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>standard-table</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-card</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>假如用户没有 <code>delete</code> 操作权限，则控件会被应用 disable 样式，且 click 事件无效，如下图：</p> <p><img src="/assets/img/auth.42fb947d.png" alt="权限校验指令"></p> <div class="custom-block warning"><p class="custom-block-title">重要！！！</p> <p>v-auth 是我们自定义的一个 <a href="https://cn.vuejs.org/v2/guide/custom-directive.html#ad" target="_blank" rel="noopener noreferrer">Vue指令<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。因为 <code>Vue指令</code> 的值需要是一个 javascript 表达式，因此你不能直接给 v-auth 赋值为字符串，
|
||
需要把 v-auth 的字符串值用 <code>``</code> 包裹起来，否则可能会报 undefined 错误。</p></div> <h3 id="权限校验指令的类型"><a href="#权限校验指令的类型" class="header-anchor">#</a> 权限校验指令的类型</h3> <p>你同样也可以指定 v-auth 的权限校验类型，可选 <a href="#%E6%9D%83%E9%99%90">permission</a> 和 <a href="#%E8%A7%92%E8%89%B2">role</a>。它的校验方式和 <a href="#%E6%9D%83%E9%99%90%E6%A0%A1%E9%AA%8C%E6%B3%A8%E5%85%A5">authorize</a> 类似，如未指定则会自动识别。
|
||
<code>v-auth:role</code> 表示通过 <code>role.operation</code> 进行校验，<code>v-auth:permission</code> 表示通过 <code>permission.operation</code> 进行校验。</p> <p>如下，指定通过 <code>role.operation</code> 校验删除控件的操作权限：</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>action<span class="token punctuation">"</span></span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{text, record}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
...
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-auth:</span>role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`delete`<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>delete<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>删除
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
...
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="异步路由权限"><a href="#异步路由权限" class="header-anchor">#</a> 异步路由权限</h2> <p>异步路由同样可以进行权限校验配置，它和正常的路由权限配置基本无异，只是无需把 <a href="#%E9%A1%B5%E9%9D%A2%E6%9D%83%E9%99%90">authority</a> 配置在元数据属性 meta 里。
|
||
你可以在路由组件注册时设置 authority，也可以在异步路由配置里设置 authority。</p> <p>路由组件注册时设置 <a href="#%E9%A1%B5%E9%9D%A2%E6%9D%83%E9%99%90">authority</a>：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-js"><code><span class="token comment">// 路由组件注册</span>
|
||
<span class="token keyword">const</span> routerMap <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span>
|
||
demo<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'演示页'</span><span class="token punctuation">,</span>
|
||
authority<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>异步路由配置里设置 <a href="#%E9%A1%B5%E9%9D%A2%E6%9D%83%E9%99%90">authority</a>：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> routesConfig <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
router<span class="token operator">:</span> <span class="token string">'root'</span><span class="token punctuation">,</span>
|
||
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'demo'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>router<span class="token operator">:</span> <span class="token string">'parent1'</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">{</span>
|
||
router<span class="token operator">:</span> <span class="token string">'demo'</span><span class="token punctuation">,</span>
|
||
icon<span class="token operator">:</span> <span class="token string">'file-ppt'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'auth/demo'</span><span class="token punctuation">,</span>
|
||
name<span class="token operator">:</span> <span class="token string">'验权页面'</span><span class="token punctuation">,</span>
|
||
authority<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
permission<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/authority.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">9/26/2021, 11:15:12 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||
←
|
||
<a href="/advance/async.html" class="prev">
|
||
异步路由和菜单
|
||
</a></span> <span class="next"><a href="/advance/login.html">
|
||
登录认证
|
||
</a>
|
||
→
|
||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||
<script src="/assets/js/app.4044373b.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/10.b3af0ac4.js" defer></script>
|
||
</body>
|
||
</html>
|