首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现权限控制路由(vue-router 动态添加路由)

Posted in Javascript onNovember 04, 2019

用户登录后返回权限菜单，前端根据权限菜单动态添加路由，然后再动态生成菜单栏。

思路如下：

一、定义初始化默认路由。

vue实现权限控制路由(vue-router 动态添加路由)

二、动态配置路由，这里是把所有组件中相应的路由配置成一个个的对象，根据后台返回的菜单tree一个个去匹配。

vue实现权限控制路由(vue-router 动态添加路由)

三、通过匹配，把匹配好的路由数据addRoutes到路由中。

vue实现权限控制路由(vue-router 动态添加路由)

四、为了防止刷新页面后路由数据被清空，这里用判断是否登录的方式，再次加载动态路由。

vue实现权限控制路由(vue-router 动态添加路由)

具体代码如下：

router.js 

import Vue from 'vue'
import {router} from './index'
import login from '@/views/login/login'
import layout from '@/views/layout/layout'
import home from '@/views/home/home.vue'
import depDsStorageList from '@/views/home/homePage1/depDsStorageList.vue'
 
 
// 数据管理
import dataSourceAdmin from '@/views/dataManage/dataSourceAdmin/dataSourceAdmin'
import dataPoolAdmin from '@/views/dataManage/dataPoolAdmin/dataPoolAdmin'
import buildSqlTable from '@/views/dataManage/buildSqlTable/buildSqlTable'
import complianceDetectionFunction from '@/views/dataManage/complianceDetectionFunction/complianceDetectionFunction'
import tablePreview from '@/views/dataManage/dataSourceAdmin/tablePreview/tablePreview.vue'
import dataAssetsManage from '@/views/dataManage/dataAssetsManage/dataAssetsManage.vue'
//标准管理
import codeItemManage from '@/views/standardManage/codeItemManage/codeItemManage'
import metadataManage from '@/views/standardManage/metadataManage/metadataManage'
import standardFileManage from '@/views/standardManage/standardFileManage/standardFileManage'
import determinerManage from '@/views/standardManage/determinerManage/determinerManage'
//数据服务
import dataServiceAdmin from '@/views/dataService/dataServiceAdmin/dataServiceAdmin.vue'
import customizedServiceAdmin from '@/views/dataService/customizedServiceAdmin/customizedServiceAdmin.vue'
 
//系统管理
import labelManage from '@/views/systemManage/labelManage/labelManage.vue'
import roleMenu from '@/views/systemManage/role-menu/role-menu.vue'
import userAdmin from '@/views/systemManage/user-admin/user-admin.vue'
import roleAdmin from '@/views/systemManage/role-admin/role-admin.vue'
 
//权限
import haveNoAuthority from '@/views/systemManage/NoAuthority/haveNoAuthority'
import haveNotFound from '@/views/systemManage/NoAuthority/haveNotFound'
 
//初始化默认路由
export let initMenu = [
 {path: '', redirect: '/login'},
 {
 path: '/login',
 name: 'login',
 component: login
 },
 {
 path: '/haveNoAuthority',
 name: 'haveNoAuthority',
 component: haveNoAuthority
 },
 {
 path: '/haveNotFound',
 name: 'haveNotFound',
 component: haveNotFound
 },
 {
 path: '',
 redirect: '/depDsStorageList',
 component: layout,
 children: [
  {
  path: 'depDsStorageList',
  name: '首页内容列表',
  component: depDsStorageList,
  },
 ],
 },
 {
 path: '',
 redirect: 'addDataService',
 component: layout,
 children: [
  {
  path: 'addDataService',
  name: '新增数据服务',
  component: () => import('@/views/dataService/dataServiceAdmin/addDataService.vue'),
  },
 ],
 },
 {
 path: '',
 redirect: '/dataPoolAdmin',
 component: layout,
 children: [
  {
  path: 'dataPoolAdmin',
  name: '数据池管理',
  component: dataPoolAdmin
  },
 ],
 },
 {
 path: '',
 redirect: '/tablePreview',
 component: layout,
 children: [
  {
  path: 'tablePreview',
  name: '表关系预览',
  component: tablePreview
  },
 ],
 },
]
 
//动态配置路由
export let menu = {
 "首页": {
 path: '',
 redirect: '/home',
 component: layout,
 children: [
  {
  path: 'home',
  name: '首页',
  component: home,
  }
 ],
 },
 "标准数据服务": {
 path: '',
 redirect: '/dataServiceAdmin',
 component: layout,
 children: [
  {
  path: 'dataServiceAdmin',
  name: '标准数据服务',
  component: dataServiceAdmin,
  }
 ],
 },
 "定制数据服务": {
 path: '',
 redirect: '/customizedServiceAdmin',
 component: layout,
 children: [
  {
  path: 'customizedServiceAdmin',
  name: '定制数据服务',
  component: customizedServiceAdmin,
  }
 ],
 },
 "数据源管理": {
 path: '',
 redirect: '/dataSourceAdmin',
 component: layout,
 children: [
  {
  path: 'dataSourceAdmin',
  name: '数据源管理',
  component: dataSourceAdmin,
  }
 ],
 },
 "数据资产管理": {
 path: '',
 redirect: '/dataAssetsManage',
 component: layout,
 children: [
  {
  path: 'dataAssetsManage',
  name: '数据资产管理',
  component: dataAssetsManage,
  }
 ],
 },
 "标签管理": {
 path: '',
 redirect: '/labelManage',
 component: layout,
 children: [
  {
  path: 'labelManage',
  name: '标签管理',
  component: labelManage,
  },
 ],
 },
 "标准规范管理": {
 path: '',
 redirect: '/standardFileManage',
 component: layout,
 children: [
  {
  path: 'standardFileManage',
  name: '标准规范管理',
  component: standardFileManage
  },
 ],
 },
 "数据元管理": {
 path: '',
 redirect: '/metadataManage',
 component: layout,
 children: [
  {
  path: 'metadataManage',
  name: '数据元管理',
  component: metadataManage
  },
 ],
 },
 "限定词管理": {
 path: '',
 redirect: '/determinerManage',
 component: layout,
 children: [
  {
  path: 'determinerManage',
  name: '限定词管理',
  component: determinerManage
  },
 ],
 },
 "代码项管理": {
 path: '',
 redirect: '/codeItemManage',
 component: layout,
 children: [
  {
  path: 'codeItemManage',
  name: '代码项管理',
  component: codeItemManage
  },
 ],
 },
 "依标建库": {
 path: '',
 redirect: '/buildSqlTable',
 component: layout,
 children: [
  {
  path: 'buildSqlTable',
  name: '依标建库',
  component: buildSqlTable
  },
 ],
 },
 "合规检测": {
 path: '',
 redirect: '/complianceDetectionFunction',
 component: layout,
 children: [
  {
  path: 'complianceDetectionFunction',
  name: '合规检测',
  component: complianceDetectionFunction
  },
 ],
 },
 "用户管理": {
 path: '',
 redirect: '/userAdmin',
 component: layout,
 children: [
  {
  path: 'userAdmin',
  name: '用户管理',
  component: userAdmin
  },
 ],
 },
 "权限管理": {
 path: '',
 redirect: '/roleAdmin',
 component: layout,
 children: [
  {
  path: 'roleAdmin',
  name: '权限管理',
  component: roleAdmin
  },
 ],
 },
 "角色资源管理": {
 path: '',
 redirect: '/roleMenu',
 component: layout,
 children: [
  {
  path: 'roleMenu',
  name: '角色资源管理',
  component: roleMenu
  }
 ],
 }
}
 
export let menuList = []
export const setMenuTree = function (menuTree) {
 let temp = new Vue({router})
 hanleFor(menuTree)
 temp.$router.addRoutes(menuList)
 temp.$router.addRoutes([{path: '*', redirect: '/' + menuList[0].redirect}])
}
 
const hanleFor = function (list){
 for (var i=0; i<list.length; i++) {
 if (list[i].children) {
  hanleFor(list[i].children)
 }else{
  menuList.push(menu[list[i].name])
 }
 }
}
export const routers = {
 router: initMenu
}

index.js

import Vue from 'vue'
import iView from 'iview'
import lodash from 'lodash'
import VueLodash from 'vue-lodash'
import Router from 'vue-router'
 
import { routers, menuList, setMenuTree } from './routers';
import 'iview/dist/styles/iview.css'
 
 
Vue.use(Router);
 
Vue.use(iView);
 
Vue.use(VueLodash, lodash);
 
export const router = new Router({
 routes: routers.router
})
 
export let getMenuFuc = function (list) {
 setMenuTree(list)
}
 
if (sessionStorage.getItem("role")) {
 getMenuFuc(JSON.parse(sessionStorage.getItem("menuTree")))
}
 
router.beforeEach((to, from, next) => {
 if (!sessionStorage.getItem("role") && to.name !== 'login') {
 next('/login')
 } else {
 next()
 }
})

login.vue

<template>
 <div class="jq22-container loginBody" style="padding-top:100px; width: 100%; height: 100%;">
 <div class="login-wrap" @keydown.enter="handleSubmit">
  <div class="login-html">
  <p class="title">江苏消防数据资源管理服务平台</p>
  <div class="hr"></div>
  <div class="login-form">
   <div class="sign-in-htm">
   <Form ref="loginForm" :model="form" :rules="rules">
   <div class="group group1">
    <FormItem prop="account">
    <Icon :size="20" type="person" class="icon-user"></Icon>
    <input v-model="form.account" type="text" class="input" placeholder="用户名">
    </FormItem>
   </div>
   <div class="group">
    <FormItem prop="password" v-show="hidePass">
    <Icon :size="16" type="locked" class="icon-pass"></Icon>
    <div @click="showPwd"><Icon :size="22" type="eye-disabled" class="eyeDisabled"></Icon></div>
    <input v-model="form.password" type="password" class="input" data-type="password" placeholder="密码">
    </FormItem>
    <FormItem prop="password" v-show="showPass">
    <Icon :size="16" type="locked" class="icon-pass"></Icon>
    <div @click="hidePwd"><Icon :size="22" type="eye" class="eyeDisabled"></Icon></div>
    <input v-model="form.password" type="text" class="input" data-type="text" placeholder="密码">
    </FormItem>
   </div>
   <div class="group">
    <!--<FormItem prop="code">-->
    <FormItem prop="code">
    <Icon :size="18" type="android-checkmark-circle" class="icon-pass"></Icon>
    <input v-model="form.code" type="text" class="input" data-type="text" placeholder="验证码" maxlength="4">
    <img id="imgObj" alt="验证码" :src="cfg.api.obtain" @click="changeImg"/>
    </FormItem>
   </div>
   <!--<div class="group">
    <input id="check" type="checkbox" class="check" checked>
    <label for="check"><span class="icon"></span> 记住密码</label>
    <a href="#forgot" rel="external nofollow" style="float: right">忘记密码?</a>
   </div>-->
   <Alert type="error" v-show="error">
    <span style="color: red">{{errorMessage}}</span>
   </Alert>
   <div class="group">
    <input type="button" class="button" value="登录" @click="handleSubmit">
   </div>
   </Form>
   </div>
  </div>
  <div span="8" v-show="spinShow">
   <Spin fix>
   <Icon type="load-c" size=50 class="demo-spin-icon-load"></Icon>
   <div>登录中，请稍后...</div>
   </Spin>
  </div>
  </div>
 </div>
 </div>
</template>
<style>
 @import "./login.css";
</style>
<script src="./loginJs.js"></script>

login.css

body{
 margin: 0 auto;
 padding: 0;
 width: 100%;
 color:#6a6f8c;
 background: url("./img/login_1.png");
 background-size: cover;
}
body,html,.loginBody{
 height: 100%;
}
input, button {
 outline: none;
 border: none;
}
.title{
 text-align: center;
 color: #f3f3f3;
 font-size: 24px;
 margin-bottom: 40px;
 font-weight: bold;
}
.login-wrap{
 width:100%;
 margin: auto;
 max-width:400px;
 min-height:500px;
 position:relative;
 background:url(./img/login_1.png);
 box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
 margin-top: 4%;
}
.login-html{
 width:100%;
 height:100%;
 position:absolute;
 background:rgba(40,57,101,.9);
 padding: 50px 20px 30px 20px;
}
.ivu-form-item-content{
 height: 50px;
}
.login-form .group1{
 position: relative;
}
.icon-user{
 position: absolute ;
 left: 10px;
 top: 12px;
 z-index: 5;
 color: #666;
 
}
.login-form .group2{
 position: relative;
 padding-bottom: 10px;
}
.icon-pass{
 position: absolute ;
 left: 10px;
 top: 13px;
 z-index: 5;
 color: #666;
}
#imgObj{
 position: absolute ;
 width:40%;
 height: 30px;
 z-index: 5;
 left: 58%;
 top: 7px;
 border-radius:15px;
 opacity: 0.7;
}
.eyeDisabled{
 position: absolute ;
 left: 91%;
 top: 10px;
 z-index: 5;
 color: #666;
}
.eyeDisabled:hover{
 cursor: pointer;
}
.login-form .group .input{
 width:100%;
 color:#fff;
 display:block;
 text-indent: 23px;
 font-size: 15px;
 border:none;
 padding:5px 10px;
 border-radius:25px;
 background:rgba(255,255,255,.1);
}
.login-form .group .button{
 width:100%;
 color:#fff;
 display:block;
 border:none;
 padding:15px 20px;
 border-radius:25px;
 background:rgba(255,255,255,.1);
 margin-top: 20px;
}
.login-form .group input[data-type="password"]{
 text-security:circle;
 -webkit-text-security:circle;
}
 
.login-form .group .button{
 background:#1161ee;
}
.hr{
 height:2px;
 margin:20px 0 30px 0;
 background:rgba(255,255,255,.2);
}
.foot-lnk{
 text-align:center;
}
#imgObj:hover{
 cursor: pointer;
}
 .demo-spin-icon-load{
 animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
 from { transform: rotate(0deg);}
 50% { transform: rotate(180deg);}
 to { transform: rotate(360deg);}
}

loginJs.js

import {getMenuFuc} from '../../router/index'
export default {
 data () {
 return {
  form: {
  account: 'admin',
  password: '123456',
  code: ''
  },
  rules: {
  account: [
   { required: true, message: '账号不能为空', trigger: 'blur' }
  ],
  password: [
   { required: true, message: '密码不能为空', trigger: 'blur' }
  ],
  code: [
   { required: true, message: '验证码不能为空', trigger: 'blur' }
  ]
  },
  showPass: false,
  hidePass: true,
  error: false,
  errorMessage: '',
  token: '',
  imgUrl: '',
  validate: '',
  spinShow:false
 };
 },
 created (){
 let _this = this
 _this.token = this.getCookie('token')
 _this.changeImg()
 $(".demo-spin-col").height($("body").height())
 },
 methods: {
 showPwd () {
  this.hidePass = false
  this.showPass = true
 },
 hidePwd () {
  this.hidePass = true
  this.showPass = false
 },
 handleSubmit () {
  let _this = this
  _this.$refs.loginForm.validate((valid) => {
  if (valid) {
   _this.spinShow = true
   _this.$ajax.post(_this.cfg.api.login, _this.form).then(function(res){
   if(res.data.result){
    _this.setCookie('token',res.data.token, 365)
    let role = res.data.data.role
    var roleString = ''
    for (var i=0; i<role.length; i++) {
    if (i == role.length-1) {
     roleString += role[i].roleName
    }else{
     roleString += role[i].roleName + ','
    }
    }
    sessionStorage.setItem("account",_this.form.account)
    sessionStorage.setItem("role",roleString)
 
    let menuTree = res.data.data.menuTree
    sessionStorage.setItem("menuTree",JSON.stringify(menuTree))//用于layout页面加载菜单
 
    let buttonList = res.data.data.buttonList //存储按钮的权限控制
    sessionStorage.setItem("buttonList",JSON.stringify(buttonList))
    getMenuFuc(menuTree)
    _this.$router.push('home');
 
    _this.error = false
   }else{
    _this.error = true
    _this.errorMessage = res.data.message
    _this.form.code = ''
    _this.changeImg()
   }
   _this.spinShow = false
   }).catch((error)=>{ _this.spinShow = false});
  }
  });
 },
 changeImg() {
  var imgSrc = $("#imgObj");
  var src = imgSrc.attr("src");
  imgSrc.attr("src", this.changeUrl(src));
 },
 changeUrl(url) {
  var timestamp = (new Date()).valueOf();
  var index = url.indexOf("?",url);
  if (index > 0) {
  url = url.substring(0, index);
  }
  if ((url.indexOf("&") >= 0)) {
  url = url + "×tamp=" + timestamp;
  } else {
  url = url + "?timestamp=" + timestamp;
  }
  return url;
 }
 }
};

以上这篇vue实现权限控制路由(vue-router 动态添加路由)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

vue实现权限控制路由(vue-router 动态添加路由)

- Author -

努力学习滴程序媛

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
js 目录列举函数
Nov 06 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
javascript解三阶幻方（九宫格）
Apr 22 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
小程序实现单选多选功能
Nov 04 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 #Javascript
element-ui table组件如何使用render属性的实现
Nov 04 #Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 #Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 #Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 #Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 #Javascript
vue双向绑定数据限制长度的方法
Nov 04 #Javascript
增删查改(1) SQL注入(2) 克隆(1) S-2000(1) 代理(2) IC-R9500(1) #{}(1) 外键(1) 小喇叭(1) 脏读(2)
You might like
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP实现的注册，登录及查询用户资料功能API接口示例
2017/06/06 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
python中time、datetime模块的使用
2020/12/14 Python
10张动图学会python循环与递归问题
2021/02/06 Python
Kate Spade美国官网：纽约新兴时尚品牌，以包包闻名于世
2017/11/09 全球购物
《月球之谜》教学反思
2014/04/10 职场文书
促销活动总结范文
2014/04/30 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
先进个人自荐书
2015/03/06 职场文书