创建vue项目,配置环境变量,后续需要用到。这里只配置生产环境和开发环境。

  项目根目录创建  .env.production  文件

NODE_ENV=production
VUE_APP_URL=http://456.com

  项目根目录创建  .env.development  文件

NODE_ENV=development
VUE_APP_URL=http://123.com

  src目录下创建router文件夹,index文件中的内容为

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
var constantRouterMap=[] export default new Router({
routes: constantRouterMap,
mode:'history'
})

  在main.js中引入

  在router文件夹下创建_import_development.js

module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

  在router文件夹下创建_import_production.js

module.exports = file => () => import('@/views/' + file + '.vue')

  这是针对不同环境下对对应文件的加载方法

  在src文件夹下创建perssion.js,请求数据,按需加载组件

  

import router from './router'
import {
Message
} from 'element-ui'
import axios from 'axios'
const _import = require('./router/_import_' + process.env.NODE_ENV) //获取组件的方法
import Layout from '@/views/layout' //Layout 是架构组件,不在后台返回,在文件里单独引入 var getRouter //用来获取后台拿到的路由 let IsFirst = true;//是否首次进入页面,避免默认进入地址无权限直接报错 router.beforeEach((to, from, next) => {
if (!getRouter) { //不加这个判断,路由会陷入死循环
if (!getObjArr('router')) {
axios.get('https://www.easy-mock.com/mock/5a5da330d9b48c260cb42ca8/example/antrouter').then(res => {
getRouter = res.data; //后台拿到路由
saveObjArr('router', getRouter) //存储路由到localStorage
router.push(getRouter[0].path);
routerGo(to, next) //执行路由跳转方法
})
} else { //从localStorage拿到了路由
getRouter = getObjArr('router') //拿到路由
routerGo(to, next) }
} else {
if (to.path == '/404') {//未加载页面默认会跳转至404页面
if (IsFirst) {
IsFirst = false;
return;
}
Message.error('您没有权限进入此页面哦,快去联系管理员开通吧!');
return;
} else {
next()
}
} }) function routerGo(to, next) {
getRouter = filterAsyncRouter(getRouter) //过滤路由
router.addRoutes(getRouter) //动态添加路由
global.antRouter = getRouter //将路由数据传递给全局变量,做侧边栏菜单渲染工作
next({
...to,
replace: true
})
} function saveObjArr(name, data) { //localStorage 存储数组对象的方法
localStorage.setItem(name, JSON.stringify(data))
} function getObjArr(name) { //localStorage 获取数组对象的方法
return JSON.parse(window.localStorage.getItem(name)); } function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串,转换为组件对象
const accessedRouters = asyncRouterMap.filter(route => {
if (route.component) {
if (route.component === 'Layout') {//Layout组件特殊处理
route.component = Layout
} else {
route.component = _import(route.component)
}
}
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children)
}
return true
}) return accessedRouters
}

  在main.js引入permission.js文件

  路由表结构

[{
path: '/hdedit',
name: 'hdEdit',
component: 'znfsgl/hdEdit/index',
},
{
path: '/wxtsjl',
name: 'wxtsjl',
component: 'znfsgl/wxtsjl/index',
},
{
path: '/wxsc',
name: 'wxsc',
component: 'znfsgl/wxsc/index',
}]

  


返回目录

vue后端返回路由表来进行权限管理,加载指定路由结构,不包含则不加载的更多相关文章

  1. Vue管理系统前端系列六动态路由-权限管理实现

    目录 为什么要使用动态路由? 主流的两种实现方式 前端控制 后端控制 后端控制路由 实现 添加菜单接口 及 菜单状态管理 根据得到的菜单生成动态路由 根据 vuex 中的暂存的菜单生成侧边菜单栏 退出 ...

  2. Linux的用户与用户组(权限管理)

    linux用户与用户.权限管理 用户管理: 1.useradd 创建用户 -c 指定用户描述 -d 指定家目录 默认家目录 /home下同名的目录 -g 指定主组 -G 指定附加组 [注意:一个用户主 ...

  3. Spring Boot + Vue 前后端分离开发,权限管理的一点思路

    在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面. 但是在前后端分离中,页面 ...

  4. vue 权限管理

    核心想法: 登陆后获得用户角色,通过角色获得用户的权限,注入权限对应的路由.刷新页面,从localStorage用角色(更好的方式是通过token)再次获得所属权限,再次注入路由.在管理界面左端循环权 ...

  5. vue前后分离动态路由和权限管理方案

    需求 需要根据不同的角色来显示不同的菜单 问题 系统是前后分离模式开发的,出现了后端接口和前端路由都需要权限管理. 思路 后端的接口肯定得验证权限 在前端做好组件名和组件的映射 前端的路由通过后端发回 ...

  6. vue基于d2-admin的RBAC权限管理解决方案

    前两篇关于vue权限路由文章的填坑,说了一堆理论,是时候操作一波了. vue权限路由实现方式总结 vue权限路由实现方式总结二 选择d2-admin是因为element-ui的相关开源项目里,d2-a ...

  7. 基于shiro+jwt的真正rest url权限管理,前后端分离

    代码地址如下:http://www.demodashi.com/demo/13277.html bootshiro & usthe bootshiro是基于springboot+shiro+j ...

  8. SpringBoot整合Shiro+MD5+Salt+Redis实现认证和动态权限管理|前后端分离(下)----筑基后期

    写在前面 在上一篇文章<SpringBoot整合Shiro+MD5+Salt+Redis实现认证和动态权限管理(上)----筑基中期>当中,我们初步实现了SpringBoot整合Shiro ...

  9. vue 导出excel后端返回乱码下载不了的解析问题

    有俩种方法可以用 第一种方法: 解析:直接解析并且下载后端的乱码  this.download('后端给的导出excel的方法', {        ...this.queryParams  }, ` ...

随机推荐

  1. [唐胡璐]QTP技巧 - QTP菜单项消失

    有时候QTP的菜单栏的下拉菜单为空。 解决方法:在菜单栏点击右键,选择“Customize”,在Customize窗口的ToolBarTab页,点击“Restore All”后即可。

  2. HDU 6415 Rikka with Nash Equilibrium (计数DP)

    题意:给两个整数n,m,让你使用 1 ~ n*m的所有数,构造一个矩阵n*m的矩阵,此矩阵满足:只有一个元素在它的此行和此列中都是最大的,求有多种方式. 析:根据题意,可以知道那个元素一定是 n * ...

  3. 从ORM框架到SQLAlchemy

    一.ORM 1.什么是ORM 对象-关系映射(Object-Relational Mapping,简称ORM),面向对象的开发方法是当今企业级应用开发环境中的主流开发方法,关系数据库是企业级应用环境中 ...

  4. Zookeeper:Zookeeper集群概要

    1.下载解压zookeeper 使用官网的(http://zookeeper.apache.org/releases.html#download)推荐下载镜像https://mirrors.tuna. ...

  5. Idea使用Lombok简化实体类代码

    引入相应的maven包 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lo ...

  6. 【Python之路】特别篇--基于领域驱动模型架构设计的京东用户管理后台

    一.预备知识: 1.接口: - URL形式 - 数据类型 (Python中不存在) a.类中的方法可以写任意个,想要对类中的方法进行约束就可以使用接口: b.定义一个接口,接口中定义一个方法f1: c ...

  7. LA 7043 International Collegiate Routing Contest 路由表 字典树离散化+bitset 银牌题

    题目链接:给你n(n<=3e4)个路由地址(注意有子网掩码现象), 路由地址:128.0.0.0/1的形式 要求你输出一个路由集合,其是给定的路由集合的补集,且个数越少越好 #include & ...

  8. 【转载】从头到尾彻底理解KMP

    转自:http://blog.csdn.net/v_july_v/article/details/7041827 从头到尾彻底理解KMP 作者:July 时间:最初写于2011年12月,2014年7月 ...

  9. thinkphp6下载安装与配置图文详细讲解教程(composer下载安装)

    thinkphp6发布也有一段时间了,相对来说比较稳定,是时候学习一下thinkphp6框架,提前学习,到正式发布的时候,可以直接拿来做正式的项目,先人一步.thinkPHP6.0在5.1的基础上对底 ...

  10. 图论——Floyd算法拓展及其动规本质

    一.Floyd算法本质 首先,关于Floyd算法: Floyd-Warshall算法是一种在具有正或负边缘权重(但没有负周期)的加权图中找到最短路径的算法.算法的单个执行将找到所有顶点对之间的最短路径 ...