使用vue實現權限控制路由的案例

這篇文章主要介紹使用vue實現權限控制路由的案例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

用戶登錄后返回權限菜單，前端根據權限菜單動態添加路由，然后再動態生成菜單欄。

思路如下：

一、定義初始化默認路由。

二、動態配置路由，這里是把所有組件中相應的路由配置成一個個的對象，根據后臺返回的菜單tree一個個去匹配。

三、通過匹配，把匹配好的路由數據addRoutes到路由中。

四、為了防止刷新頁面后路由數據被清空，這里用判斷是否登錄的方式，再次加載動態路由。

具體代碼如下：

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" >
 <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" >忘記密碼?</a>
   </div>-->
   <Alert type="error" v-show="error">
    <span >{{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實現權限控制路由的案例”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！