后台菜单

展开

后台菜单

## 服务端菜单目录结构

\server\app\adminapi\config下的
**├─📂config **  
**│      ├─auth.php **  //菜单文件
**│      ├─menu.php **  //权限文件

------------

#### menu.php文件示例：
```php
[
    'name'  => '商品',       //一级菜单名称
    'type'  => 1,           //类型：1-菜单；2-权限
    'sons'  => [            //子级
        [
            'name'    => '商品管理',          //二级菜单名称
            'type'    => 1,                  //类型：1-菜单；2-权限
            'sons'    => [
                [
                    'name'      => '查看',      //权限名称
                    'type'      => 2,           //类型：1-菜单；2-权限
                    'auth_key'  => 'goods/goods.view'   //权限key，key要确保唯一,该字段可拆分goods、goods、view在auth.php中使用   
                ],
                [
                    'name'      => '管理',
                    'type'      => 2,
                    'auth_key'  => 'goods/goods.manage'
                ]

],
        ],
        [
            'name'  => '分类管理',
            'type'  => 1,
            'sons'  => [
                [
                    'name'      => '查看',
                    'type'      => 2,
                    'auth_key'   => 'goods/category.view'
                ],
                [
                    'name'      => '管理',
                    'type'      => 2,
                    'auth_key'  => 'goods/category.manage'
                ]
            ]
        ],
    ],
],
```
####  auth_key字段设计规则是： 菜单/菜单.权限

#### auth.php文件示例：
```php
//商品
'goods'     => [    //'goods'=> 对应menu.php商品管理的auth_key=>'goods/goods.view' 中的第一个goods
    //商品管理
    'goods'         => [           //'goods'=> 对应menu.php商品管理的auth_key=>'goods/goods.view' 中的第二个goods
        'page_path' => '/goods/lists',   //该字段表示前端的页面路径,用于跳转
        'view'      => [                 //查看权限，对应menu.php商品管理的auth_key=>'goods/goods.view' 中的view
            'button_auth'   => ['view'],  //view下的按钮权限（现在没用到，可随便填，该设计是方便以后将权限分到按钮）
            'action_auth'   => ['goods.goods/lists','goods.goods/otherlist'],
        ],                //服务端接口权限
        'manage'        => [       //管理权限，对应menu.php商品管理的auth_key=>'goods/goods.manage' 中的manage
            'button_auth'   => ['auth_all'],
            'action_auth'   => [   //服务端接口权限
                'goods.goods/add',
                'goods.goods/edit',
                'goods.goods/del',
                'goods.goods/status',
                'goods.goods/sort',
                'goods.goods/export',
            ]
        ],
    ],
    //分类管理
    'category' => [
        'page_path'     => '/goods/category',
        'view'      => [
            'button_auth'  => ['view'],
            'action_auth'  => ['goods.goodscategory/lists'],
        ],
        'manage'        => [
            'button_auth'   => ['auth_all'],
            'action_auth'   => [
                'goods.category/add',
                'goods.category/edit',
                'goods.category/status',
                'goods.category/del',
            ]
        ],
    ]
],

```
#### menu.php和auth.php文件主要是通过auth_key关联，新增菜单请确保唯一
------------

## 角色菜单权限添加
#### 在后台设置-平台权限-角色中权限里面设置好菜单权限就可以了。
![](https://md.likeshop.cn/server/index.php?s=/api/attachment/visitFile&sign=08954a8c6da0d5c13ff3e93ac67596a4)

** 注：如果菜单权限设置好没生效，请检查menu.php中的auth_key字段和auth.php各个索引有没有对上。**

## 前端路由
\web\src\router下的
**├─📂router **  
**│      ├─modules **  //各个模块的路由配置
**│      ├─index.ts **  //路由入口文件

```js  
//# router/index.ts
// 权限路由，根据路由渲染菜单
export const asyncRoutes: Array<RouteConfig> = [
    ...index, //首页
    ...shop, //店铺
    ...goods, //商品
    ...order, //订单
    ...user, //用户
    ...marketing, //营销
    ...application, //应用
    ...finance, //财务
    ...data, //数据
    ...channel, //渠道
    ...setting //设置
]

//不受权限控制且不会出现在左侧菜单的路由
const constantRoutes: Array<RouteConfig> = [
    {
        path: '*',
        redirect: '/error/404'
    },
    {
        path: '/account',
        name: 'account',
        component: Secondary,
        redirect: '/account/login',
        children: [
            {
                path: '/account/login',
                name: 'login',
                meta: {
                    title: '登录',
                    parentPath: '/account'
                },
                component: () => import('@/views/account/login.vue')
            }
        ]
    },
	...
]
```
### 路由信息

```js

meta: {
		hidden: true, //是否在左侧菜单中隐藏
		title: '', //页面标题
		parentPath: '', // 父级路径（用于1级菜单的选中）
		prevPath: '', // 上一个页面的路径（用于详情页时选中对应的菜单）
		moduleName: '' //模块名称 （定义为一个模块，则2，3级菜单中只会显示对应模块的菜单，如营销，应用下面的子模块）
		icon: '', //图标名称
		permission: ['view'] //权限字符，固定写法，是一个菜单页面才需要
	 }
```