How to implement vue routing permissions and button permissions

This article "vue routing permissions and button permissions how to achieve" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "vue routing permissions and button permissions how to achieve" article.

One menu routing permission

1.1 Front-end routing configuration table

1.2 backend data return

1.3 get the data and save it to vuex

1.4 the purpose of flattening is to compare permissions when routing is skipped

/ / flattening method flatten (data) {return data.reduce ((arr, {name,id,resourceType,dimensionTypeCode,btnPermissions,path,children = [],}) = > arr.concat ([{name,id,resourceType,dimensionTypeCode,btnPermissions,path,},], this.flatten (children)), []);}

1.5 in el-menu, the code of the sidebar-item component that directly gets the data from vuex for rendering will not be posted.

/ / js part computed: {productMenuList () {if (this.$store.state.user.user.userMenu) {return this.$store.state.user.user.userMenu;}},}

1.6 router Jump Intercept judgment

Router.beforeEach ((to, _ from, next) = > {document.title = "background system -" + to.meta.title / / dynamic title if (whiteList.includes (to.path)) {next ();} else {if (storageLocal.getItem ("token")) {if (hasPermission (to, store.state.user.user.menuTile)) {next () } else {next ('/ error/404')}} else {next ({path: "/ login", query: {redirect: to.fullPath}) / / get whether there is a menu permission function hasPermission (router, accessMenu) {let menu = getMenuByPath (router.path, accessMenu) If (menu.path) {return true;} return false;}

1.7 getMenuBypath method

Here I compare path or name, as long as it is the only one in the route.

Export const getMenuByPath = function (path, accessMenu) {if (accessMenu) {let filter = accessMenu.filter (res = > {return res.path = = path;}) return filter.length > 0? Realization of two Button permissions in filter [0]: {}

2.1 the data returned by the backend or? That one.

2.2 encapsulate custom instructions and create a new hasPermissionbtn.js

Import router from'.. /.. / router'import store from'.. /.. / store' export default (Vue) = > {/ * * Custom button permissions instruction * / Vue.directive ('has', {mounted (el, binding) {/ / get user button permissions from configuration let path = router.currentRoute.value.path; let menu = getMenuByPath (path, store.state.user.user.menuTile) / / get button permission if (! Vue.config.globalProperties.$_has (binding.value, menu.btnPermissions)) {/ / remove mismatched elements el [XSS _ clean] .removeChild (el) / / el.setAttribute ("disabled", true)}},}) / / check permission method Vue.config.globalProperties.$_has = function (value) BtnPermissions) {let isExist = false / / A collection of buttons with permissions Let btnPermsArr = [] if (btnPermissions) {btnPermsArr = btnPermissions;} if (btnPermsArr.includes (value)) {isExist = true} return isExist}}

2.3 use of the permissions button

/ / v-has can be used on any element, such as div or el-table-column tag association. The above is about "how to achieve vue routing permissions and button permissions". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about the relevant knowledge, please follow the industry information channel.