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 动态添加路由)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
js获取form的方法
May 06 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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
You might like
关于php fread()使用技巧
2010/01/22 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
python实现自动更换ip的方法
2015/05/05 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
运动会广播稿300字
2014/01/10 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
公司请假条范文
2014/04/11 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
安全环保演讲稿
2014/08/28 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
教师自荐信范文
2015/03/06 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL