search
HomeWeb Front-endJS Tutorialvue-router's permission control code sharing
vue-router's permission control code sharingFeb 07, 2018 am 10:49 AM
vue-routercodeshare

This article mainly introduces to you the sample code of vue-router permission control. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The company's backend management system has recently been built, and the system is still relatively large. The following points must be achieved:

  • Menu permissions, different display according to different permissions Menu

  • Operation permissions, for example, some accounts do not have permission to add new ones, and some do not have permissions to modify or delete

  • Data permissions, such as statistical overview, Ordinary administrators cannot see the company's business overview, but they can see the overview of their own region

  • Display permissions, such as lists, operations can see the contract amount in that column, but the market cannot See that the contract amount column

is still under construction so far, and the menu permissions and operation permissions have been resolved.

Menu permissions:

At the beginning, we also followed the method given above. We first configure a set of routes locally, and then after successful login, a menu list will be returned from the server. Then in beforeEach, the returned menu list is compared with the locally configured route. If it exists, it has permission to access. After working on it for a few days, I found it difficult to use. I had to configure a complete set of routes locally, and I also had to create several pages to write these routing information to the server, so as to allocate permissions. When you have a lot of permission menus, like ours In this backend, there are several sets of internal company permissions, as well as agent, merchant permissions, etc. There may be more than hundreds of different menus. Such configuration is too tiring and error-prone.

The final solution is not to do any routing configuration locally at all. The login page is made separately and not placed in the vue component. After the login is successful, the menu list is grabbed from the background because the login is successful now. , so what you're grabbing is having a whole new menu. After successfully fetching, configure it into the route, and then instantiate vue. This avoids the need to configure a set of routes locally, and configures the route entirely on the server.

There is only one difficulty solved in this way, that is, routing requires corresponding components, so we store all components in an object. In the menu list returned by the server, there will be a field to configure the component name. , when the routing configuration is generated after the fetch is successful, just use router[menuName] to load it directly into this component, which is very convenient.

main.js code snippet:


// 实例化Login类并初始化
 new Login(function (err, data) {
  if (err) {
   // 登录出错
  } else {
   // 登录成功
   init(data);
  }
 }).init();

const init = function (data) {
 // 先配置路由信息
 // componentConfigs 是本地的组件配置
 let routers = assignRouter(data.menus, componentConfigs);
 // 实例化路由
 router = new Router({routes: routers});
 // 再实例化vue
 new Vue({
  el: '#app',
  store,
  router,
  nprogress,
  ...App
 });
};

componentConfigs.js code snippet:


export default {
 Common: {
  Admin: require('../../vue/pages/common/Admin'),
  Index: require('../../vue/pages/common/Index'),
  UpdatePassword: r => require.ensure([], () => r(require('../../vue/pages/users/UpdatePassword')), 'users')
 }
}

The menu json returned by the server:

The meta field contains the operation permissions in the current route


[{
      "path": "\/admin\/index",
      "name": "\u9996\u9875",
      "component": "Common.Index",
      "display": true,
      "icon": "icon-home"
    }, {
      "path": "\/admin\/updatePassword",
      "name": "\u4fee\u6539\u5bc6\u7801",
      "component": "Common.UpdatePassword",
      "display": false
    }, {
      "path": "\/admin\/commodity",
      "name": "\u5546\u54c1\u7ba1\u7406",
      "component": "Content",
      "display": true,
      "icon": "icon-class",
      "children": [{
        "path": "\/admin\/commodity\/publicWarehouse",
        "name": "\u516c\u5171\u5e93\u7ba1\u7406",
        "component": "Commodity.PublicWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }, {
        "path": "\/admin\/commodity\/businessesWarehouse",
        "name": "\u5546\u5bb6\u5e93\u7ba1\u7406",
        "component": "Commodity.BusinessesWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }]
    }]

The permissions of the menu are probably In this way, as for the operation permissions, the idea is as follows: write an authentication vue plug-in, and then put all operations independently into methods; then all operations call the authentication function in @click, $auth('add', arg1, arg2, ...argN); $auth determines whether this.$route.meta has permission to perform this operation. If so, call this[authName].apply(null, arg);

Related recommendations:

Practical PHP Member Permission Control Implementation Principle Analysis_PHP Tutorial

The above is the detailed content of vue-router's permission control code sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Vue应用中遇到vue-router的错误“NavigationDuplicated: Avoided redundant navigation to current location” – 怎么解决?Vue应用中遇到vue-router的错误“NavigationDuplicated: Avoided redundant navigation to current location” – 怎么解决?Jun 24, 2023 pm 02:20 PM

Vue应用中遇到vue-router的错误“NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation”–怎么解决?Vue.js作为快速而灵活的JavaScript框架在前端应用开发中越来越受欢迎。VueRouter是Vue.js的一个代码库,用于进行路由管理。然而,有时

win7系统如何分享wifi热点win7系统如何分享wifi热点Jul 01, 2023 pm 01:53 PM

  win7系统如何分享wifi热点?我们电脑在连接了网络之后,也是可以进行无线网络的分享的。很多用户想要将自己电脑的网络分享到手机上来使用。很多小伙伴不知道怎么详细操作,小编下面整理了win7系统如何分享wifi热点的操作方法步骤,如果你感兴趣的话,跟着小编一起往下看看吧!  win7系统如何分享wifi热点的操作方法步骤  1、要想开启wifi热点,首先得要有无线网卡,笔记本是有自带的,pc的话可以购买一个随身wifi来分享wifi,这里就不叙述了。首先按下键盘上的windows键打开开始菜

win7企业版激活密钥有哪些的分享win7企业版激活密钥有哪些的分享Jul 09, 2023 pm 03:01 PM

win7企业版激活密钥有没有最新的?如果你安装的是官方win7企业版,会提示用windows7企业版产品密钥来激活,否则不能正常使用。所以小编接下来跟大家分享一些win7企业版激活密码,大家一起来看看吧。Q3VMJ-TMJ3M-99RF9-CVPJ3-Q7VF3KGMPT-GQ6XF-DM3VM-HW6PR-DX9G8MT39G-9HYXX-J3V3Q-RPXJB-RQ6D79JBBV-7Q7P7-CTDB7-KYBKG-X8HHCP72QK-2Y3B8-YDHDV-29DQB-QKWWM6JQ

一文深入详解Vue路由:vue-router一文深入详解Vue路由:vue-routerSep 01, 2022 pm 07:43 PM

本篇文章带大家详解Vue全家桶中的Vue-Router,了解一下路由的相关知识,希望对大家有所帮助!

在Vue应用中使用vue-router时出现“Error: Failed to resolve async component: xxx”怎么解决?在Vue应用中使用vue-router时出现“Error: Failed to resolve async component: xxx”怎么解决?Jun 24, 2023 pm 06:28 PM

在Vue应用中使用vue-router是一种常见的方式来实现路由控制。然而,在使用vue-router的时候,有时候会出现“Error:Failedtoresolveasynccomponent:xxx”的错误,这是由于异步组件加载错误导致的。在本文中,我们将探讨这个问题,并提供解决方案。理解异步组件加载原理在Vue中,组件可以被同步或异步地创建

Vue-Router: 如何使用路由元信息来管理路由?Vue-Router: 如何使用路由元信息来管理路由?Dec 18, 2023 pm 01:21 PM

Vue-Router:如何使用路由元信息来管理路由?简介:Vue-Router是Vue.js官方的路由管理器,它可以帮助我们快速构建单页应用程序(SPA)。除了常见的路由功能外,Vue-Router还支持使用路由元信息来管理和控制路由。路由元信息是可以附加到路由上的自定义属性,它可以帮助我们实现一些特殊的逻辑或者权限控制。一、什么是路由元信息?路由元信息是

在Vue应用中使用vue-router时出现“Error: Avoided redundant navigation to current location”怎么解决?在Vue应用中使用vue-router时出现“Error: Avoided redundant navigation to current location”怎么解决?Jun 24, 2023 pm 05:39 PM

在Vue应用中使用vue-router时,有时候会出现“Error:Avoidedredundantnavigationtocurrentlocation”的错误信息。这个错误信息的意思是“避免了到当前位置的冗余导航”,通常是因为重复点击了同一个链接或者使用了相同的路由路径导致的。那么,怎么解决这个问题呢?使用exact修饰符在定义router

在Vue应用中使用vue-router时出现“Error: Invalid route component: xxx”怎么解决?在Vue应用中使用vue-router时出现“Error: Invalid route component: xxx”怎么解决?Jun 25, 2023 am 11:52 AM

Vue是一个流行的前端框架,它允许开发者快速构建高效、可重用的web应用程序。Vue-router是Vue框架中的一个插件,可以帮助开发者轻松管理应用的路由和导航。但是,在使用Vue-router的过程中,有时候会遇到一个常见的错误:“Error:Invalidroutecomponent:xxx”。这篇文章将介绍这个错误的原因和解决方法。原因在Vu

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool