国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

老板讓我十分鐘上手nx-admin

williamwen1986 / 2293人閱讀

摘要:我就是一游客系統(tǒng)獲取我的信息拿到權(quán)限值動(dòng)態(tài)加載路由通行不是。。我是權(quán)限汪等等我看看作者有沒(méi)有把你降級(jí)沒(méi)有好了。。你還是權(quán)限汪請(qǐng)進(jìn)有滾吧你已經(jīng)不是權(quán)限汪了作者已經(jīng)把你寫成戰(zhàn)斗力只有的渣渣了沒(méi)有沒(méi)有還敢闖這里滾去關(guān)口沒(méi)錯(cuò),就這么簡(jiǎn)單。

大體流程
參考資料:

nx-admin項(xiàng)目地址

首先這里就不講解vue和vuex之類的基礎(chǔ)東西了 有興趣的可以去官方文檔了解。這里根據(jù)流程走向大概說(shuō)說(shuō)
路由配置

首先找到路由配置,路由配置放在了src/router/index.js路由配置里暴露了兩個(gè)常量 一個(gè)是 constantRouterMap 另外一個(gè)是 asyncRouterMap 這里先說(shuō)說(shuō)constantRouterMap。 nx-admin的權(quán)限驗(yàn)證大概是

1 默認(rèn)大家都能訪問(wèn)的頁(yè)面,不需要權(quán)限, 都訪問(wèn)的頁(yè)面定義為 constantRouterMap

2 需要登錄或者需要權(quán)限的頁(yè)面路由定義為 asyncRouterMap

根據(jù)后臺(tái)獲取到用戶信息role(權(quán)限)的不同來(lái)動(dòng)態(tài)加載asyncRouterMap中meta.role的權(quán)限對(duì)應(yīng)的頁(yè)面

登錄成功后做的事情

點(diǎn)擊登錄以后 左側(cè)的側(cè)邊欄有導(dǎo)航列表。 這里提出兩個(gè)疑問(wèn)?

根據(jù)路由配置說(shuō)的 動(dòng)態(tài)加載對(duì)應(yīng)的權(quán)限路由 那么側(cè)邊欄那么多路由 肯定不能寫死吧?

我點(diǎn)擊登錄后 那些登錄流程怎么走的?用戶權(quán)限存在哪里?token在哪里?

側(cè)邊欄的動(dòng)態(tài)渲染

根據(jù)問(wèn)題1來(lái)回答 首先我們找到layout也就是src/views/layout/Layout.vue
因?yàn)樵诼酚膳渲梦募覀兛匆?jiàn)asyncRouterMap中好多組件的父組件都是LayoutLayout中我們就可以看到有個(gè)組件sidebar
ok繼續(xù)找sidebar這個(gè)組件 src/views/layout/components/Sidebar/index.vue,發(fā)現(xiàn)這里就是渲染側(cè)邊欄的,然后找到渲染的變量是permission_routers 這個(gè)變量是存在vuex里面的,也就是說(shuō)路由是存在vuex的 所以咋們?nèi)uex里面找找看 src/store/modules/permission.js

路由的動(dòng)態(tài)加載

src/store/modules/permission.js 這個(gè)文件里面有個(gè)actions

 GenerateRoutes({ commit }, data) {
      return new Promise(resolve => {
        const { roles } = data
        let accessedRouters
        if (roles.indexOf("admin") >= 0) {
          accessedRouters = asyncRouterMap
        } else {
          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
        }
        commit("SET_ROUTERS", accessedRouters)
        resolve()
      })
    }

發(fā)現(xiàn)就是這一段代碼更改了permission_routers,具體邏輯咱們不看 簡(jiǎn)單解釋來(lái)說(shuō)就是

 如果用戶的權(quán)限是管理員
        把a(bǔ)syncRouterMap所有的路由頁(yè)面都渲染出來(lái),畢竟管理員嘛 你懂的權(quán)限嘛。
    否則 
        我不是管理員但是也不是游客就是一小市民 那么我要去asyncRouterMap中找找我小市民能夠訪問(wèn)哪些頁(yè)面。

看完這段邏輯咋們就知道了這個(gè)路由是如何動(dòng)態(tài)更改的了,等等,是不是忘了啥? 雖然我知道這個(gè)actions,但是。。。在哪調(diào)用的? 經(jīng)過(guò)深思熟慮的著想,在花了0.1s后 就得出,既然是路由嘛 肯定是有個(gè)全局的地方要做判斷的 所以得出結(jié)論就是 router.beforeEach, 一開(kāi)始去找那個(gè)啥src/main.js,發(fā)現(xiàn)beforeEach被分離在src/permission.js 打開(kāi)這個(gè)文件。一切疑問(wèn)都解開(kāi)了。

用戶權(quán)限的獲取

說(shuō)真的。。這個(gè)文件好長(zhǎng)。。都不想看了。。。。 下圖的代碼這么長(zhǎng) 看個(gè)毛啊。。于是我簡(jiǎn)單翻譯了下

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar 
  if (getToken()) { // 判斷是否有token
    if (to.path === "/login") {
      next({ path: "/" })
      NProgress.done() // router在hash模式下 手動(dòng)改變hash 重定向回來(lái) 不會(huì)觸發(fā)afterEach 暫時(shí)hack方案 ps:history模式下無(wú)問(wèn)題,可刪除該行!
    } else {
      if (store.getters.roles.length === 0) { // 判斷當(dāng)前用戶是否已拉取完user_info信息
        store.dispatch("GetUserInfo").then(res => { // 拉取user_info
          const roles = res.data.role
          store.dispatch("GenerateRoutes", { roles }).then(() => { // 生成可訪問(wèn)的路由表
            router.addRoutes(store.getters.addRouters) // 動(dòng)態(tài)添加可訪問(wèn)路由表
            next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch(() => {
          store.dispatch("FedLogOut").then(() => {
            Message.error("Verification failed, please login again")
            next({ path: "/login" })
          })
        })
      } else {
        // 沒(méi)有動(dòng)態(tài)改變權(quán)限的需求可直接next() 刪除下方權(quán)限判斷 ↓
        if (hasPermission(store.getters.roles, to.meta.role)) {
          next()//
        } else {
          next({ path: "/401", query: { noGoBack: true }})
          NProgress.done() // router在hash模式下 手動(dòng)改變hash 重定向回來(lái) 不會(huì)觸發(fā)afterEach 暫時(shí)hack方案 ps:history模式下無(wú)問(wèn)題,可刪除該行!
        }
        // 可刪 ↑
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單,直接進(jìn)入
      next()
    } else {
      next("/login") // 否則全部重定向到登錄頁(yè)
      NProgress.done() // router在hash模式下 手動(dòng)改變hash 重定向回來(lái) 不會(huì)觸發(fā)afterEach 暫時(shí)hack方案 ps:history模式下無(wú)問(wèn)題,可刪除該行!
    }
  }
})

請(qǐng)說(shuō)人話,翻譯成人話的版本。。。

  每次更改頁(yè)面路由
        你有沒(méi)有token啊?
            有啊
                好的,你的權(quán)限是默認(rèn)的權(quán)限0么?
                    是的。。我就是一游客
                        系統(tǒng)獲取我的信息..拿到權(quán)限值,動(dòng)態(tài)加載路由(GenerateRoutes)...通行...
                    不是。。我是權(quán)限汪(admin)
                        等等..我看看作者有沒(méi)有把你降級(jí)
                            沒(méi)有
                                好了。。你還是權(quán)限汪 請(qǐng)進(jìn)
                            有
                                滾吧,你已經(jīng)不是權(quán)限汪了,作者已經(jīng)把你寫成戰(zhàn)斗力只有5的渣渣了
            沒(méi)有
                沒(méi)有還敢闖這里?滾去關(guān)口(/login)

沒(méi)錯(cuò),就這么簡(jiǎn)單。整個(gè)權(quán)限驗(yàn)證流程就完整了。剩下的就是讀讀文檔啊,看看如何使用組件之類的了。

參考 https://github.com/Relsoul

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/52590.html

相關(guān)文章

  • 老板讓我分鐘上手nx-admin

    摘要:我就是一游客系統(tǒng)獲取我的信息拿到權(quán)限值動(dòng)態(tài)加載路由通行不是。。我是權(quán)限汪等等我看看作者有沒(méi)有把你降級(jí)沒(méi)有好了。。你還是權(quán)限汪請(qǐng)進(jìn)有滾吧你已經(jīng)不是權(quán)限汪了作者已經(jīng)把你寫成戰(zhàn)斗力只有的渣渣了沒(méi)有沒(méi)有還敢闖這里滾去關(guān)口沒(méi)錯(cuò),就這么簡(jiǎn)單。 大體流程 參考資料: nx-admin項(xiàng)目地址 首先這里就不講解vue和vuex之類的基礎(chǔ)東西了 有興趣的可以去官方文檔了解。這里根據(jù)流程走向大概說(shuō)說(shuō) 路由...

    DevYK 評(píng)論0 收藏0
  • 老板讓我分鐘上手nx-admin

    摘要:我就是一游客系統(tǒng)獲取我的信息拿到權(quán)限值動(dòng)態(tài)加載路由通行不是。。我是權(quán)限汪等等我看看作者有沒(méi)有把你降級(jí)沒(méi)有好了。。你還是權(quán)限汪請(qǐng)進(jìn)有滾吧你已經(jīng)不是權(quán)限汪了作者已經(jīng)把你寫成戰(zhàn)斗力只有的渣渣了沒(méi)有沒(méi)有還敢闖這里滾去關(guān)口沒(méi)錯(cuò),就這么簡(jiǎn)單。 大體流程 參考資料: nx-admin項(xiàng)目地址 首先這里就不講解vue和vuex之類的基礎(chǔ)東西了 有興趣的可以去官方文檔了解。這里根據(jù)流程走向大概說(shuō)說(shuō) 路由...

    muzhuyu 評(píng)論0 收藏0
  • nx-admin1.2版本發(fā)布

    摘要:是一個(gè)開(kāi)源的管理系統(tǒng)前端集成方案地址的初心組件更易用,讓每個(gè)小白快速上手,最大程度上幫助個(gè)人,企業(yè)節(jié)省時(shí)間成本和費(fèi)用開(kāi)支。盡管這個(gè)過(guò)程不簡(jiǎn)單,但是干就完了版本添加了圖表第三方網(wǎng)站購(gòu)物車實(shí)戰(zhàn)右鍵菜單 nx-admin 是一個(gè)開(kāi)源的管理系統(tǒng)前端集成方案 github地址 nx-admin的初心 組件更易用, 讓每個(gè)小白快速上手, 最大程度上幫助個(gè)人,企業(yè)節(jié)省時(shí)間成本和費(fèi)用開(kāi)支。 盡管這...

    Rainie 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<