Vuejs 實現許可權管理

2022-03-07 16:50:44 字數 2676 閱讀 9817

程式執行時，router只配置登陸 首頁404 等基本頁面

import main from '@/views/main.vue';


// 不作為main元件的子頁面展示的頁面單獨寫，如下


export const loginrouter = ,


component: resolve => 


};export const page404 = ,


component: resolve => 


};export const page403 = ,


name: 'error-403',


component: resolve => 


};export const page500 = ,


name: 'error-500',


component: resolve => 


};// 作為main元件的子頁面展示但是不在左側選單顯示的路由寫在otherrouter裡


export const otherrouter = }


]};// 所有上面定義的路由都要寫在下面的routers裡


export const routers = [


loginrouter,


otherrouter,


page500,


page403


];
使用路由

import vue from 'vue';


import iview from 'iview';


import util from '../libs/util';


import vuerouter from 'vue-router';


import from './router';


import cookies from 'js-cookie';


import main from '@/views/main.vue';


import store from '@/store';


vue.use(vuerouter);


// 路由配置


const routerconfig = ;


export const router = new vuerouter(routerconfig);


router.beforeeach((to, from, next) => );


} else if (cookies.get('user') && to.name === 'login') );


} else 


});router.aftereach((to) => );
登陸操作 獲取選單 將選單存到sessionstorage中，並且把選單儲存到vuex中，因為vuex一重新整理就沒了，所以要放在sessionstorage中

handlesubmit() ]


}, ]


}, ]


}, ]


}, ]


}, ]


}, ]


}, ]


}, ]


}, , , ]


}, ]}]}
其中component儲存的是字串 需要轉換為引入 vue元件 修改router.index 在使用前 修改配置

import vue from 'vue';


import iview from 'iview';


import util from '../libs/util';


import vuerouter from 'vue-router';


import from './router';


import cookies from 'js-cookie';


import main from '@/views/main.vue';


import store from '@/store';


vue.use(vuerouter);


// 路由配置


const routerconfig = ;


//避免重新整理後 選單清空


let menus = window.sessionstorage.routes //登入成功返回的選單


if (menus != null && menus != "null" && menus.length != 0) );


} else if (cookies.get('user') && to.name === 'login') );


} else 


});router.aftereach((to) => );



menu[i].children[j].component = require('../views/page/' + filepath + '.vue'); 這裡 前面的路徑 和後面的.vue不可少，意思是讓webpack到views下面的page下面去找.vue結尾的檔案。


404路由 要加到最後 否則路由先找到*的 以後的就不執行了。


store中
state: ,

mutations: }};

左側選單遍歷 store中的menulist

}                        


}
至此 許可權從後台讀取，到前台頁面展示就完成了，頁面內部每次重新整理 都會重新從sessionstorage中獲取重新賦值。

vuejs單頁應用的許可權管理實踐

在眾多的b端應用中,簡單如小型企業的管理後台,還是大型的cms,crm系統,許可權管理都是乙個重中之重的需求,過往的web應用大多採取服務端模板 服務端路由的模式,許可權管理自然也由服務端進行控制和過濾.但是在前後端分離的大潮下,如果採用單頁應用開發模式的話,前端也無可避免要配合服務端共同進行許可權...

vuejs實現全選功能

專案使用 vuejs 實現 方式一，完全發揮了 vuejs 的特性，使用了 computed 實現了對 單選按鈕的實時監控。var list var vm new vue computed set value 方式二使用普通的事件監聽方式處理資料狀態 v model status change al...

許可權管理及其實現

許可權管理分為兩部分 訪問的資料許可權和訪問的功能許可權 能夠訪問的資料由部門來實現 能夠訪問的功能由賦予的功能url實現，功能表的主要屬性有 名稱，上級功能，url 1.使用者首先建立部門，如部門1，部門1 1，部門1 1 1 2.新增功能 新增功能的分類，新增功能的url 3.建立具體的角色如 ...