docs: English translation of plugin-access

docs/plugins/plugin-access.md

@@ -1,65 +1,65 @@
----
-translateHelp: true
----
-
 # @umijs/plugin-access
 
+## How to enable
 
-## 启用方式
+Enabled when file `src/access.ts` exists.
 
-有 `src/access.ts` 时启用。
+## Introduction
 
-## 介绍
+The `src/access.ts` file have to export default method.
+The exported method will be executed when the project is initialized. 
+This method needs to return an object. 
+Each value of the object defines a permission.
 
-我们约定了 `src/access.ts` 为我们的权限定义文件，该文件需要默认导出一个方法，导出的方法会在项目初始化时被执行。该方法需要返回一个对象，对象的每一个值就对应定义了一条权限。如下所示：
+Eg.:
 
-```javascript
+```typescript
 // src/access.ts
 export default function(initialState) {
   const { userId, role } = initialState;
 
   return {
     canReadFoo: true,
-    canUpdateFoo: role === 'admin',
+    canUpdateFoo: role ==='admin',
     canDeleteFoo: foo => {
       return foo.ownerId === userId;
     },
   };
 }
 ```
+You can use `initialState` data provided by `@umijs/plugin-initial-state` plugin to initialize user permissions.
 
-其中 `initialState` 是通过初始化状态插件 `@umijs/plugin-initial-state` 提供的数据，你可以使用该数据来初始化你的用户权限。
+## Configuration
 
-## 配置
+### Extended routing configuration
 
-### 扩展的路由配置
+With the `@umijs/plugin-layout` plug-in, you can easily implement permission control for certain pages. As shown below, users can access this page only if they have the `canReadPageA` permission (defined in `src/access.ts`). Otherwise, the error page which is built in the `@umijs/plugin-layout` plugin will be rendered by default.
 
-配合 Layout 插件你可以很简单是实现针对某些页码的权限控制。如下所示，只有拥有了 canReadPageA （在 `src/access.ts` 中定义）权限，用户才可以访问该页面。否则会默认渲染 Layout 插件内置的权限错误页面。
+The `access` key in route object is `string` containing corresponding permission name.
 
 ```typescript
 // config/route.ts
-export const routes =  [
+export const routes = [
   {
     path: '/pageA',
     component: 'PageA',
-    access: 'canReadPageA', // 权限定义返回值的某个 key
+    access: 'canReadPageA'
   }
 ]
 ```
 
-#### access
-
-* Type: `string`
+## Export
 
-对应的权限名称。
+- `useAccess` hook
+- `<Access>` component.
 
-## API
+### useAccess hook
 
-### useAccess
+Use `useAccess` hook to obtain permission set defined in the 'src/access.ts`. 
+Example usage:
 
-我们提供了一个 Hooks 用于在组件中获取权限相关信息，如下所示：
-
-```javascript
+```typescript
+// pages/pageA.ts
 import React from 'react';
 import { useAccess } from 'umi';
 
@@ -68,54 +68,40 @@ const PageA = props => {
   const access = useAccess();
 
   if (access.canReadFoo) {
-    // 如果可以读取 Foo，则...
+    // user has permission canReadFoo
   }
 
-  return <>TODO</>;
+  return <div>...</div>;
 };
 
 export default PageA;
 ```
+### Access component
 
-配合 `Access` 组件可以很好简单的实现页面内的元素的权限控制。
-
-### Access
-
-可以在业务组件中使用插件提供的 React hook `useAccess` 以及组件 `<Access />` 对应用进行权限控制了。
-组件 `Access` 支持的属性如下：
-
-#### accessible
-
-* Type: `boolean`
-
-是否有权限，通常通过 `useAccess` 获取后传入进来。
+Provided `<Access>` component can be used to control access to elements in the application.
 
-#### fallback
+| Property | Description | Type | Default | 
+| --- | --- | --- | --- | --- |
+| accessible | If truthy, `children` will be rendered, otherwise `fallback` will be rendered. | boolean | false |
+| children | Node, which is rendered, when `accessible` has truthy value. | ReactNode | - |
+| fallback | Node, which is rendered, when `accessible` has falsy value. | ReactNode | - |
 
-* Type: `React.ReactNode`
+By default, no content will be rendered.
 
-无权限时的显示，默认无权限不显示任何内容。
+The complete example:
 
-### children
-
-* Type: `React.ReactNode`
-
-有权限时的显示。
-
-完整示例如下：
-
-```javascript
+```typescript
 import React from 'react';
 import { useAccess, Access } from 'umi';
 
 const PageA = props => {
-  const { foo } = props;
-  const access = useAccess(); // access 的成员: canReadFoo, canUpdateFoo, canDeleteFoo
-
+  const {foo} = props;
+  const access = useAccess();
+  
   if (access.canReadFoo) {
-    // 如果可以读取 Foo，则...
+    // user has permission canReadFoo
   }
- 
+
   return (
     <div>
       <Access
@@ -141,4 +127,3 @@ const PageA = props => {
 };
 ```
 
-`useAccess()` 的返回值 `access` 就是第三步中定义的权限集合，可以利用它进行组件内代码执行流的控制。 `<Access>` 组件拥有 `accessible` 和 `fallback` 两个属性，当 `accessible` 为 `true` 时会渲染子组件，当 `accessible` 为 `false` 会渲染 `fallback` 属性对应的 `ReactNode`。