vue路由权限(结合服务端koa2)

gitee地址

一、项目初始化

vue create manager-admin // 创建vue项目// 管理员权限安装
cnpm i -S koa@2 // 下载koa2依赖
cnpm install  --global koa-generator // 下载框架 koa-generator
koa2 manager-server // 创建项目
cd manager-server // 进入项目
npm install // 安装依赖
npm start // 启动项目cnpm i koa2-cors -S // 解决跨域

二、逻辑梳理

  1. 登录后,接口返回uid → 请求路由权限API
  2. 接口返回该用户对应路由权限列表(JSON,非树结构,含pid)
  3. 前端将JSON树形结构化
  4. 树形结构化 → vue路由结构
  5. 路由结构动态 → 静态路由
  6. 树形结构化数据 → 菜单组件
// 服务端 路由列表{id: 2,pid: 0,path: '/course',name: 'Course',title: '课程管理'},{id: 3,pid: 2,path: 'operate',name: 'CourseOperate',link: '/course/operate',title: '课程操作'},
  1. 全局的请求数据做在vuex的action里,在main.js里dispatch
  2. store/index.js 里引入 state.js mutation.js action.js
  3. libs/utils
  4. 前端的权限控制:根据后端返回的权限,做成动态路由

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251230.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javascript --- 类、class、事件委托的编程风格

类风格: // 父类 function Widget(width, height) {this.width width || 50;this.height height || 50;this.$elem null; } Widget.prototype.render function($where) {if(this.$elem) {this.$elem.css({width: this.width "px",height: this.height "p…

在线获取UUID

http://fir.im/udid转载于:https://www.cnblogs.com/mtjbz/p/8116576.html

堆和堆排序

堆和优先队列 普通队列:FIFO,LILO 优先队列:出队顺序和入队顺序无关,和优先级相关。一个典型应用就是操作系统中。动态选择优先级高的任务执行 堆的实现 最典型的堆就是二叉堆,就像是一颗二叉树。这个堆的特点&#xf…

ES5-1 发展史、ECMA、编程语言、变量、JS值

1. 5大主流浏览器及内核(自主研发) 浏览器内核IEtridentChromewebkit blinkSafariwebkitFirefoxgeckoOperapresto 2. 浏览器的历史 和 JS诞生 1989-1991 WorldWideWeb(后来为了避免与万维网混淆而改名为Nexus)是世界上第一个网页…

javascript --- 使用对象关联简化整体设计

在某个场景中,我们有两个控制器对象: 1.用来操作网页中的登录表单; 2.用来与服务器进行通信. 类设计模式 // 把基础的函数定义在名为Controller的类中,然后派生两个子类LoginController和AuthController. // 父类 function Controller() {this.errors []; } Controller.prot…

javascript --- polyfill中几个常用方法

ES6中,新增了许多有用的方法,下面分享几个ES6之前得版本写的polyfill Number.EPSILON: // 机器精度,并判断2个数是否相等 if(!Number.EPSILON){Number.EPSILON math.pow(2, -52); }function numberCloseEnoughToEqual(n1, n2) {return Math.abs(n1 - n2 ) < Number.EPSIL…

[Usaco2010 Nov]Visiting Cows

题目描述 经过了几周的辛苦工作,贝茜终于迎来了一个假期.作为奶牛群中最会社交的牛,她希望去拜访N(1<N<50000)个朋友.这些朋友被标号为1..N.这些奶牛有一个不同寻常的交通系统,里面有N-1条路,每条路连接了一对编号为C1和C2的奶牛(1 < C1 < N; 1 < C2 < N; C1…

ES5-2 语法、规范、错误、运算符、判断分支、注释

1. 错误 MDN错误列表 Uncaught SyntaxError: Unexpected token ) // 语法错误 Uncaught ReferenceError: a is not defined // 引用错误等类型 Uncaught TypeError: Cannot read property toString of null出现一个语法错误&#xff0c;则一行代码都不会执行&#xff08;检查…

新单词 part 4

part 41.veto 英[ˈvi:təʊ]美[ˈvi:toʊ]n. 行使否决权; 否决权&#xff0c;否认权; 否决理由;vt. 否决&#xff0c;不同意; 不批准&#xff0c;禁止;vi. 否决; 禁止;2.acoustics 英[əˈku:stɪks]美[əˈkustɪks]n. 声学; &#xff08;传声系统的&#xff09; 音响效果; 声…

unity深度查找某个子物体和遍历所有子物体方法

本文总结一下关于unity的查找子物体的方法 首先说明一下这里将讲三种查找子物体方法&#xff1a; 查找固定路径的某一个子物体的方法、通过名字深度查找某个子物体的方法、查找父物体下所有子物体的方法。 第一:查找固定路径的某一个子物体的方法 对于已知的路径可以直接用go.t…

javascript --- JSON字符串化

工具函数JSON.stringify()将JSON对象序列化为字符串时也用到了ToString. 看下面的代码: console.log(JSON.stringify(42)); console.log(JSON.stringify("42")); console.log(JSON.stringify(null)); console.log(JSON.stringify(true));所有安全的JSON值都可以使用…

静态链接和动态链接

静态链接和动态链接 静态链接方法&#xff1a;静态链接的时候&#xff0c;载入代码就会把程序会用到的动态代码或动态代码的地址确定下来 静态库的链接可以使用静态链接&#xff0c;动态链接库也可以使用这种方法链接导入库 动态链接方法&#xff1a;使用这种方式的程序并不在一…

ES5-3 循环、引用值初始、显示及隐式类型转换

1. 循环 for循环的三个参数abc&#xff0c;a只执行一次&#xff0c;c在每次循环后执行 // 打印0-100的质数 1不是质数 var list [2] for (var i 3; i < 100; i i 2) {var flag falsefor (var j 0; j < list.length; j) {var cur list[j]if (i % cur 0 &…

hihocoder 二分

题目 一个简单的二分&#xff0c;只是想说明一下&#xff0c;如若要查找一个数组中某个数的下标可以直接用lower_bound()这个函数。只是要考虑到要查找的数不在数组中的这种情况。 #include <cstdio> #include <iostream> #include <algorithm> using namesp…

ubuntu开启ssh服务

更新资源列表&#xff1a;sudo apt-get update -> 输入管理员密码 安装openssh-server: sudo apt-get install openssh-server 查看 ssh服务是否启动&#xff1a;sudo ps -e |grep ssh 启动ssh服务&#xff1a; sudo service ssh start 转载于:https://www.cnblogs.com/ver…

javascript --- 判断只有1个为真

下面写一个用于判断只有一个为真的函数: function onlyOne(a,b,c){return !!((a && !b && !c) ||(!a && b && !c) || (!a && !b && c)); } var a true; var b false;onlyOne(a,b,b) // true onlyOne(a,b,a); // false上述…

13 代码分割之import静动态导入

前端首屏优化方案之一 项目构建时会整体打包成一个bundle的JS文件&#xff0c;而有的代码、模块是加载时不需要的&#xff0c;需要分割出来单独形成一个文件块chunk&#xff08;不会打包在main里&#xff09;&#xff0c;让模块懒加载&#xff08;想加载时才加载&#xff09;&a…

2018.01.01(数字三角形,最长上升子序列等)

2017.12.24 简单的动态规划 1.数字三角形(算法引入) 题目描述&#xff1a;下图所示是一个数字三角形&#xff0c;其中三角形中的数值为正整数&#xff0c;现规定从最顶层往下走到最底层&#xff0c;每一步可沿左斜线向下或右斜线向下走。设三角形有n层&#xff0c;编程计算出从…

Mac iOS 允许从任何来源下载应用并打开

一个快捷的小知识点&#xff0c;mark&#xff01; 允许从任何来源下载应用并打开&#xff0c;不用手动去允许&#xff0c;更加简洁&#xff01; 只需一行命令 sudo spctl --master-disable 1.正常情况下&#xff0c;打开偏好设置&#xff0c;选择安全性与隐私&#xff0c;界面是…

ES5-4 函数基础与种类、形实参及映射、变量类型

模块编程原则&#xff1a;高内聚&#xff0c;低耦合&#xff08;重复部分少&#xff09;&#xff0c;让一个模块有强的功能性、高的独立性 → 单一责任制&#xff0c;用函数进行解耦合。 1. 函数命名规则 不能以数字开头可以以字母_$开头包含数字小驼峰命名法 函数声明一定有…