亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue系列之動(dòng)態(tài)路由詳解【原創(chuàng)】

 更新時(shí)間:2017年09月10日 08:45:20   作者:一半水一半冰  
下面小編就為大家?guī)?lái)一篇vue系列之動(dòng)態(tài)路由詳解【原創(chuàng)】。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就想給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

開(kāi)題

最近用vue來(lái)構(gòu)建了一個(gè)小項(xiàng)目,由于項(xiàng)目是以iframe的形式嵌套在別的項(xiàng)目中的,所以對(duì)于登錄的驗(yàn)證就比較的麻煩,索性后端大佬們基于現(xiàn)在的問(wèn)題提出了解決的方案,在看到他們的解決方案之前,我先畫了一個(gè)比較標(biāo)準(zhǔn)的單系統(tǒng)的解決方案。

本文目錄:

一: 設(shè)想
二: 討論
三:實(shí)現(xiàn)
四:總結(jié)

一: 設(shè)想

簡(jiǎn)單解釋下上圖就是:

首先前端從cookie獲取token,如果沒(méi)有token就跳轉(zhuǎn)到登錄頁(yè)面登錄,登錄驗(yàn)證之后生成token存在數(shù)據(jù)庫(kù)中并返回給前端;前端將這個(gè)token保存下來(lái),為了讓在瀏覽器新的tab頁(yè)時(shí)不需要登錄,我們前端需要將這個(gè)token保存到cookie之中。

如果用戶已經(jīng)有了token,那么再驗(yàn)證是否有用戶信息,如果沒(méi)有去請(qǐng)求用戶信息的接口,后臺(tái)讀取用戶的基本信息返回給前端,前端根據(jù)后臺(tái)返回的用戶權(quán)限生成固定的路由表用于頁(yè)面攔截。

在用戶token和權(quán)限都有的情況下,進(jìn)入自己權(quán)限內(nèi)的頁(yè)面并且攜帶token訪問(wèn)后臺(tái)進(jìn)行交互。

用戶在退出時(shí),請(qǐng)求后臺(tái)接口,清除token數(shù)據(jù)。

二: 討論

由于公司的項(xiàng)目更加的復(fù)雜,屬于基于原來(lái)的系統(tǒng)開(kāi)發(fā)新的系統(tǒng)模塊,但是這些模塊又為了以后主體功能的更新下次迭代需要保持相對(duì)的獨(dú)立性,預(yù)計(jì)以后的老系統(tǒng)只起一個(gè)用戶中心的功能,所以現(xiàn)在是基于實(shí)現(xiàn)單點(diǎn)登錄的能力去迭代更新現(xiàn)在的新的項(xiàng)目。

今天上午對(duì)于登錄的實(shí)現(xiàn)進(jìn)行了相關(guān)討論,由于公司項(xiàng)目保密考慮只是單單做相關(guān)的介紹:

現(xiàn)有的老項(xiàng)目將慢慢向用戶中心轉(zhuǎn)換,而以前的新項(xiàng)目需要去這個(gè)用戶中心獲取登錄信息。具體的實(shí)現(xiàn)是:

登錄新項(xiàng)目b.exaplem.com通過(guò)session檢測(cè)到未登錄時(shí)(這里說(shuō)下新的項(xiàng)目和老項(xiàng)目在同一個(gè)一級(jí)域名下),跳轉(zhuǎn)到a.exaplem.com?returnUrl='b.exaplem.com',在a.exaplem.com下成功登錄后生成一個(gè)ticket給到b.exaplem.com,b.exaplem.com將這個(gè)ticket存在session里面來(lái)保持登錄狀態(tài)。

因?yàn)楝F(xiàn)在基本上是先登錄a.exaplem.com然后再去登錄b.exaplem.com,所以當(dāng)我們第一次進(jìn)入b.exaplem.com系統(tǒng)時(shí),b.exaplem.com會(huì)向a.exaplem.com系統(tǒng)發(fā)送請(qǐng)求來(lái)獲取ticket,并且生成session來(lái)維持登錄狀態(tài)。

三:實(shí)現(xiàn)

當(dāng)時(shí)想通過(guò)引入vuex并通過(guò)cookie來(lái)保存token的狀態(tài),但是由于現(xiàn)在的項(xiàng)目還是后端以session的形式來(lái)維持用戶的登錄狀態(tài)所以還是沒(méi)有引入vuex。

基本實(shí)現(xiàn)如下:

main.js增加引入的permission.js文件如下:

import Vue from 'vue'
import router from './router'
import { asyncRouterMap, constantRouterMap } from './router'
 
function hasPermission(roles, route) { //
 if (route.meta && route.meta.role) {
  return roles.some(role => role === route.meta.role)
 } else {
  return true
 }
}

function filterAsyncRouter(asyncRouterMap, roles) {

 const accessedRouters = asyncRouterMap.filter(route => {
  if (hasPermission(roles, route)) {
   if (route.children && route.children.length) {
    route.children = filterAsyncRouter(route.children, roles)
   }
   return true
  }
  return false
 })

 return accessedRouters
}

// 加載頁(yè)面之前
router.beforeEach((to, from, next) => {
 NProgress.start() // 開(kāi)啟Progress
 if (to.path == '/ContractAduit/Error') {
  next()
 } else if (!Vue.prototype.hasRoute) {

  Vue.prototype.$ajax.get(Vue.prototype.$api.getModuleHost("用戶信息接口地址"), {})
   .then(data => {
    if (data.code == 1000) {
     let menus = data.menu
     let roles = menus.map((menu, index) => {
      return parseInt(menu.url);
     })
     const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
     router.addRoutes(accessedRouters)
     Vue.prototype.userInfo = {
      id: data.id,
      realname: data.realname
     }
     Vue.prototype.hasRoute = true;
     next({...to })
    } else {
     router.push({ name: 'ErrorPageRouter' });
    }
   })
   .catch(err => console.log(err))
 } else {
  next()
 }
});

route.js文件如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRouterMap = [{
  path: '/404',
  name: 'NoFoundPagetRouter',
  component: require('../views/404.page'),
  meta: {
   title: '404',
  }
 },
 {
  path: '/ContractAduit/NoAccess',
  name: 'NoAccessPageRouter',
  component: require('../views/no-access.page'),
  meta: {
   title: '無(wú)權(quán)限',
  }
 },
 {
  path: '/ContractAduit/Error',
  name: 'ErrorPageRouter',
  component: require('../views/error.page'),
  meta: {
   title: '內(nèi)部錯(cuò)誤',
  }
 }
]

export default new Router({
 mode: 'history',
 routes: constantRouterMap
})

export const asyncRouterMap = [{ 
  path: '/ContractAduit/Supplier/List',
  name: 'SupplierListPageRouter',
  component: require('../views/supplier/supplier-list.page.vue'),
  meta: {
   title: '某某列表頁(yè)',
   role: 10001
  }
 },
 ...
 {
  path: '/',
  redirect: '/ContractAduit/Supplier/List',
  hidden: true,
  meta: {
   title: '某某列表頁(yè)',
   role: 10001
  }
 }, {
  path: '*',
  redirect: '/404',
  hidden: true
 }
]

因?yàn)闆](méi)有引入vuex所以需要在VUE構(gòu)造函數(shù)的原型對(duì)象上聲明變量來(lái)判斷是否已經(jīng)拉取了用戶的基本信息,因?yàn)槲覀兒蠖说臋?quán)限是配置的頁(yè)面級(jí)權(quán)限(即不是按照角色來(lái)安排哪個(gè)前端頁(yè)面來(lái)可訪問(wèn),而是根據(jù)后臺(tái)返回的頁(yè)面代碼來(lái)判斷哪個(gè)前端頁(yè)面可訪問(wèn))。

四:總結(jié)

因?yàn)槲覀兊捻?xiàng)目不可能達(dá)到千篇一律的情況,選擇適合自己項(xiàng)目的解決方案才是最重要的,不要為了用某個(gè)技術(shù)而去用某個(gè)技術(shù)。

以上這篇vue系列之動(dòng)態(tài)路由詳解【原創(chuàng)】就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • django使用channels2.x實(shí)現(xiàn)實(shí)時(shí)通訊

    django使用channels2.x實(shí)現(xiàn)實(shí)時(shí)通訊

    這篇文章主要介紹了django使用channels2.x實(shí)現(xiàn)實(shí)時(shí)通訊,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • vue部署包可配置后臺(tái)接口地址的方法

    vue部署包可配置后臺(tái)接口地址的方法

    這篇文章主要介紹了vue部署包可配置后臺(tái)接口地址的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-03-03
  • vue+Java后端進(jìn)行調(diào)試時(shí)解決跨域問(wèn)題的方式

    vue+Java后端進(jìn)行調(diào)試時(shí)解決跨域問(wèn)題的方式

    今天在開(kāi)發(fā)中遇到有點(diǎn)小問(wèn)題,vue+Java后端進(jìn)行調(diào)試時(shí)如何解決跨域問(wèn)題,下面小編給大家分享解決方法,感興趣的朋友一起看看吧
    2017-10-10
  • Element-UI 使用el-row 分欄布局的教程

    Element-UI 使用el-row 分欄布局的教程

    這篇文章主要介紹了Element-UI 使用el-row 分欄布局的教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-10-10
  • vue中關(guān)于el-popover的使用

    vue中關(guān)于el-popover的使用

    這篇文章主要介紹了vue中關(guān)于el-popover的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue 實(shí)現(xiàn)cli3.0中使用proxy進(jìn)行代理轉(zhuǎn)發(fā)

    vue 實(shí)現(xiàn)cli3.0中使用proxy進(jìn)行代理轉(zhuǎn)發(fā)

    今天小編就為大家分享一篇vue 實(shí)現(xiàn)cli3.0中使用proxy進(jìn)行代理轉(zhuǎn)發(fā),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-10-10
  • 在vue2中實(shí)現(xiàn)截圖功能的基本步驟

    在vue2中實(shí)現(xiàn)截圖功能的基本步驟

    在Vue 2中實(shí)現(xiàn)截圖功能,可以使用HTML5的Canvas元素和一些JavaScript代碼來(lái)捕獲屏幕或特定元素的截圖,以下是一個(gè)簡(jiǎn)單的步驟和示例代碼來(lái)實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下
    2023-10-10
  • Vue?3?使用moment設(shè)置顯示時(shí)間格式的問(wèn)題及解決方法

    Vue?3?使用moment設(shè)置顯示時(shí)間格式的問(wèn)題及解決方法

    在Vue?3中,因?yàn)檫^(guò)濾器(filter)已經(jīng)被廢棄,取而代之的是全局方法(global?method),本文給大家介紹Vue?3?使用moment設(shè)置顯示時(shí)間格式的問(wèn)題及解決方法,感興趣的朋友一起看看吧
    2023-12-12
  • vue中this.$parent的使用方式

    vue中this.$parent的使用方式

    這篇文章主要介紹了vue中this.$parent的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue項(xiàng)目前端知識(shí)點(diǎn)整理【收藏】

    vue項(xiàng)目前端知識(shí)點(diǎn)整理【收藏】

    本文是小編給大家收藏整理的關(guān)于vue項(xiàng)目前端知識(shí)點(diǎn),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-05-05

最新評(píng)論