欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue后臺管理如何配置動態(tài)路由菜單

 更新時間:2022年04月02日 15:55:21   作者:小栗子的普  
這篇文章主要介紹了vue后臺管理如何配置動態(tài)路由菜單,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

后臺管理配置動態(tài)路由菜單

前段時間做一個后臺管理項目,因為超級管理員可以給普通管理員動態(tài)更改權(quán)限,所以vue-element-admin里的寫死的權(quán)限路由菜單就不太適合我,自己研究了好半天,經(jīng)歷了各種死循環(huán),終于差不多弄出了一個,可能會有點啰嗦

總結(jié)一下:

我這個后臺分為三個角色:超級管理員、企業(yè)管理員和普通管理員。其中,超級管理員可以查看所有的路由菜單,企業(yè)管理員也是固定的幾個菜單,所以,超級管理員和企業(yè)管理員是我在前端寫好的路由菜單里直接配置的權(quán)限,而普通管理員是不固定的,需要后臺給我返回數(shù)據(jù),自己拼接。

1、首先我們需要有一個登錄的頁面,簡單點的,用戶名和密碼還有一個登錄按鈕就可以了,我用的是vue-element-admin的模板,它已經(jīng)寫好了,直接拿來用就可以

2、自己在src-api文件夾中新建一個js文件來寫自己的登錄、獲取用戶信息、登出等接口(也可以換掉之前的模擬接口,在api/user.js文件)。

3、點擊登錄按鈕,這時會在這個方法里面調(diào)用store-modules-user.js里的login方法,如下:

4、store-modules-user.js里的login方法就是調(diào)用了自己的登錄接口,當然,調(diào)用之前記得先引入文件

上面是我引入的登錄、獲取用戶信息、登出的接口

5、調(diào)用登錄接口后store存儲返回的token等數(shù)據(jù)(根據(jù)自己的需求來,因為我后期需要用戶id,所以也把用戶id存進了store里)

6、這時調(diào)用同頁面的getInfo方法,當然,這個方法里也同樣調(diào)用了獲取用戶信息的接口,這步是為了獲取到登錄的用戶的角色,調(diào)用之后,將返回的用戶角色名等存到store里(我還存了其它的數(shù)據(jù),還是那句話,哪些數(shù)據(jù)需要就存哪些)

*** 這里當時我出了一個bug:當我登錄進去之后刷新頁面又跳到了登錄的頁面,說明有關(guān)鍵的數(shù)據(jù)沒有存儲上,上網(wǎng)一找,token在登錄調(diào)用登錄接口后已經(jīng)用cookie存入了瀏覽器,那應該就是我只把id存進了store而沒有存入瀏覽器,才導致一刷新就失去了id,所以我用localStorage/sessionStorage存入了id,在getInfo里才獲取本地存儲的id在存儲到store中

 7、由于普通管理員的路由菜單是后臺返給我的,所以,在getInfo這個方法中,我也直接調(diào)用了獲取路由菜單的接口,將返回的數(shù)據(jù)通過拼接來生成一個完整的路由菜單,最后將這個路由菜單數(shù)組保存在store中

注:路由菜單最后一定要放404,格式 :{ path: '*', redirect: '/404', hidden: true } ,切記一定要放在最后!??!

8、接下來是去src/permission.js中調(diào)用store-modules-user.js里的getInfo方法,這塊與模板的代碼沒有區(qū)別,所以就不多敘述。在此方法中調(diào)用了store-modules-permission.js里的generateRoutes的方法

 我們?nèi)フ乙幌逻@個方法,這個方法其實是根據(jù)傳過來的role來判斷它能看到的路由菜單。模板里原來的方法是根據(jù)角色和寫好的路由菜單一一比較,最后把對應上權(quán)限的項放進一個數(shù)組里,我這里的超級管理員和普通管理員因為權(quán)限和路由菜單固定,所以直接套用的代碼。而普通管理員,則是調(diào)用保存在store里的路由菜單數(shù)組,然后賦值給定義好的變量

之后需要更改的地方就沒有了,就可以測試登錄了。

這里我犯了一個比較大的bug:

當以普通管理員登錄的時候,我進去之后菜單顯示正常,可是當我不管點擊哪個菜單,都給我跳到了404 。經(jīng)過一番測試與排查,我找到了解決方法,是加一個延時器,加在generateRoutes方法的這個地方

之后就運行成功了,但是具體原因我其實不太明白,因為我console.log(accessedRoutes) 出來的也是正常的路由菜單

這就是大體的配置動態(tài)路由菜單的過程,作為第一次配置成功的心得。

根據(jù)權(quán)限生成動態(tài)路由及導航菜單

最近在做一個后臺管理項目,涉及到一些菜單權(quán)限控制,具體實現(xiàn)如下:(話不多說,直接上代碼)

router/index.js

const Home = resolve => require(['@/views/common/Home.vue'], resolve);
const AAA = resolve => require(['@/views/page/AAA.vue'], resolve);
const BBB = resolve => require(['@/views/pages/BBB.vue'], resolve);
const CCC= resolve => require(['@/views/pages/CCC.vue'], resolve);
let routes = [{
    path: '/',
    component: Home,
    name: '首頁',
    redirect: '/AAA',
    hidden: true,
    mate: {
      icon: 'fa fa-home',
      index: 'AAA'
    },
    children: [{
      path: '/AAA',
      component: AAA,
      name: '主頁'
    }]
  }]
//從服務器獲取路由,進行拼接,所有模塊不再以import的形式引入,只能通過require方式加載!
export const makeRoute = function (items) {
  let routes = [];
  for (var i = 0; i < items.length; i++) {
    // console.log(items[i]);
    items[i] = formatRoute(items[i]);
    if (items[i].children) {
      //遞歸處理子路由的component
      items[i].children = makeRoute(items[i].children);
    }
  }
  return items;
}
//格式化路由,使component掛載到路由上,生成addRoutes可用的格式
const formatRoute = (item) => {
  let route = item;
  route.component = eval(route.component);
  return route;
}
export default routes;

main.js(登錄成功時,后臺返回有權(quán)限的路由并存在狀態(tài)管理器vuex中)

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import axios from 'axios'
import store from './store'
import routes from './router/index'
import { makeRoute } from './router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes
})
router.beforeEach((to, from, next) => {
  
    //如果目標路由為登陸時,恢復用戶原始狀態(tài)
    if (to.path === '/login') {
      window.clearInterval(window.interval);
      store.commit('logOut');
    }
    let allRoutes = store.getters.allRoutes;
    let loginStatus = store.getters.loginStatus;
  
    //登錄成功時加載路由及模塊
    if (from.path === '/login' && allRoutes !== '' && loginStatus) {
      let routesObj = makeRoute(store.getters.allRoutes);
      router.addRoutes(routesObj);
    }
    //沒有登錄時自動跳轉(zhuǎn),開發(fā)環(huán)境免登陸時注釋
    if ( to.path !== '/login' && (allRoutes === '' || !loginStatus)) {
      if(sessionStorage.getItem('userInfo') === null){  
        next({ path: '/login' })
      } else {  
        //刷新當前頁面
        //重置store參數(shù)
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        store.commit('setUser', userInfo);
        if(userInfo.routes){
          //重新加載路由及模塊
          let routesObj = makeRoute(userInfo.routes);
          router.addRoutes(routesObj);
        }
        next({path: to.path, query: to.query});
      }
    }else{
      //路由的next必須存在,否則無法進入下一頁
      next();
    }
  })

備注:此方案最大的好處是不用再使用require引入每一個組件并掛載到路由

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue打包后出現(xiàn)空白頁的原因及解決方式詳解

    vue打包后出現(xiàn)空白頁的原因及解決方式詳解

    在項目中很多時候需要用到vue打包成html不需要放在服務器上就能瀏覽,根據(jù)官網(wǎng)打包出來的html直接打開是顯示空白,下面這篇文章主要給大家介紹了關(guān)于vue打包后出現(xiàn)空白頁的原因及解決方式的相關(guān)資料,需要的朋友可以參考下
    2022-07-07
  • vue2.0項目實現(xiàn)路由跳轉(zhuǎn)的方法詳解

    vue2.0項目實現(xiàn)路由跳轉(zhuǎn)的方法詳解

    這篇文章主要介紹了vue2.0項目實現(xiàn)路由跳轉(zhuǎn)的詳細方法,非常不錯,具有一定的參考借鑒借鑒價值,需要的朋友可以參考下
    2018-06-06
  • Vue3項目中配置TypeScript和JavaScript的兼容

    Vue3項目中配置TypeScript和JavaScript的兼容

    在Vue3開發(fā)中,常見的使用JavaScript(JS)編寫代碼,但也會有調(diào)整編寫語言使用TypeScript(TS)的需求,因此,在Vue3項目設置中兼容TS和JS是刻不容緩的重要任務,
    2023-08-08
  • 如何手寫一個簡易的 Vuex

    如何手寫一個簡易的 Vuex

    這篇文章主要介紹了如何手寫一個簡易的 Vuex,幫助大家更好的理解和學習vue,感興趣的朋友可以了解下
    2020-10-10
  • vue實現(xiàn)移動端touch拖拽排序

    vue實現(xiàn)移動端touch拖拽排序

    這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端touch拖拽排序,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue3使用canvas的詳細指南

    vue3使用canvas的詳細指南

    這篇文章主要給大家介紹了關(guān)于vue3使用canvas的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下
    2023-04-04
  • vue中如何通過iframe方式加載本地的vue頁面

    vue中如何通過iframe方式加載本地的vue頁面

    這篇文章主要介紹了vue中如何通過iframe方式加載本地的vue頁面,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue3+Element+Ts實現(xiàn)表單的基礎搜索重置等功能

    Vue3+Element+Ts實現(xiàn)表單的基礎搜索重置等功能

    本文主要介紹了Vue3+Element+Ts實現(xiàn)表單的基礎搜索重置等功能,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-12-12
  • VUE登錄注冊頁面完整代碼(直接復制)

    VUE登錄注冊頁面完整代碼(直接復制)

    這篇文章主要給大家介紹了關(guān)于VUE登錄注冊頁面的相關(guān)資料,在Vue中可以使用組件來構(gòu)建登錄注冊頁面,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下
    2023-12-12
  • vue+element-ui實現(xiàn)主題切換功能

    vue+element-ui實現(xiàn)主題切換功能

    這篇文章主要介紹了vue+element-ui實現(xiàn)主題切換功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06

最新評論