SC——权限验证+路由暴露+分页暴露

1、权限验证

按钮

v-if="checkPermission(['role:delete'])"

<div class="textAlign">
		<div @click="showUpdate(scope.$index)">
					<el-dropdown-item type="primary" v-if="checkPermission(['role:edit'])">编辑</el-dropdown-item>
		</div>
		<div @click="removeUser(scope.$index)">
					<el-dropdown-item type="danger" v-if="checkPermission(['role:delete'])">删除</el-dropdown-item>
					</div>
		</div>

路由

roles: ['role:list'] PS:有的是role

{
      path: 'RightsManagement', // 角色管理
      component: () => import('@/views/BackgroundManagement/RightsManagement/list'),
      name: 'RightsManagement',
      meta: {
        title: 'RightsManagement', icon: 'icon', noCache: true, roles: ['role:list']
      }
    }

// 管理员管理
const BackgroundManagementRouter = {
  path: '/BackgroundManagement',
  component: Layout,
  redirect: '/BackgroundManagement/newAdministratorManagement',
  name: 'BackgroundManagement',
  meta: {
    title: 'BackgroundManagement',
    icon: 'table',
   roles: ['role:list','user:list'],
  },
  children: [
    {
      path: 'newAdministratorManagement',
      component: () => import('@/views/BackgroundManagement/newAdministratorManagement/index'),
      name: 'newAdministratorManagement',
      meta: {
        title: 'AdministratorManagement',
        // icon: 'icon',
        noCache: true,
        roles: ['user:list'],
      }
    },
    {
      path: 'RightsManagement', // 角色管理
      component: () => import('@/views/BackgroundManagement/RightsManagement/list'),
      name: 'RightsManagement',
      meta: {
        title: 'RightsManagement',
        // icon: 'icon',
        noCache: true,
        roles: ['role:list'],
      }
    },
  ]
}

// 店铺管理
const storeManagementRouter = {
  path: '/storeManagements',
  component: Layout,
  redirect: '/storeManagement',
  name: 'storeManagements',
  meta: {
    title: 'storeManagement',
    icon: 'tree-table',
  roles: ['shop:list'],
  },
  children: [
    {
      path: 'storeManagement',
      component: () => import('@/views/storeManagement/index'),
      name: 'storeManagement',
      meta: {
        title: 'storeManagement',
        // icon: 'icon',
        noCache: true,
        roles: ['shop:list'],
      }
    }
  ]
}

 

 

2、路由暴露（两处）

router-index.js

//。。。省略代码
import Layout from '@/layout'
import {
  BackgroundManagementRouter,//自定义名称
 
} from './modules/BackgroundManagement'
export const asyncRoutes = [
  /** when your routing map is too long, you can split it into small modules **/
  BackgroundManagementRouter,
  { path: '*', redirect: '/404', hidden: true }
]
//。。。省略代码

router-modules-BackgroundManagement.js

import Layout from '@/layout'
// 管理员管理
const BackgroundManagementRouter = {
	path: '/BackgroundManagement',//注意这里的地址名称不能和子菜单地址名称相同
	component: Layout,
	redirect: '/BackgroundManagement/newAdministratorManagement',
	name: 'BackgroundManagement',//注意这里的地址名称不能和子菜单地址名称相同
	meta: {
	  title: 'BackgroundManagement',//这里的名字要在zh.js里定义
	  icon: 'table'
	},
	children: [
	  {
	    path: 'newAdministratorManagement',//子菜单地址名称
	    component: () => import('@/views/BackgroundManagement/newAdministratorManagement/index'),
	    name: 'newAdministratorManagement',
	    meta: {
	      title: 'AdministratorManagement',
	      // icon: 'icon',
	      noCache: true//面包屑导航切换时是否刷新页面
	    }
	  },
    {
      path: 'RightsManagement', // 子菜单地址名称
      component: () => import('@/views/BackgroundManagement/RightsManagement/list'),
      name: 'RightsManagement',
      meta: {
        title: 'RightsManagement', 
				// icon: 'icon', 
				noCache: true, 
      }
    }
  ]
}
export {
  BackgroundManagementRouter,ExpressCompanyManagementRouter,storeManagementRouter
}//这样只创建一个js文件就可以

3.分页暴露

src-components-Pagination-index

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

<style scoped>
.el-pagination {
  padding: 10px 0;
}
/*
.pagination-container.hidden {
  display: none;
} */
</style>

组件引入使用

<pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum"
				:limit.sync="listQuery.pageSize" @pagination="getList" :page-sizes="[10, 20, 30, 50]"/>
return{

	total: 0, //总页数--数据总条数	
				listQuery: {
					pageNum: 1, //页码
					pageSize: 10, //每页条数
					
				},
}
//查询列表
			getList() {
				this.listLoading = true;
				request({
					url: "api/order/list",
					method: "POST",
					data: {
						pageNum: this.listQuery.pageNum, //页码
						pageSize: this.listQuery.pageSize, //每页条数
					},
				}).then(data => {
					this.listLoading = false;//加载
					this.total = data.info.totalSize;
					console.log('data', data)
				})
			},