管理員可新打開下級用戶權(quán)限的頁面亦鳞,并且管理員的頁面和新打開用戶的頁面之間馍忽,權(quán)限互不干擾的小功能。

  • 前段時間做了一個管理系統(tǒng)的頁面燕差,要求最高權(quán)限的賬號遭笋,可以新打開下級權(quán)限的頁面。
    如圖1徒探,管理員打開自己頁面的權(quán)限瓦呼,也可以打開下級權(quán)限用戶的頁面,如圖2测暗。圖1和圖1同一個用戶2種權(quán)限央串,可以在一個瀏覽器里打開。
    圖1.png

    圖2.png

    要求:
  1. 原來的頁面權(quán)限為管理員的權(quán)限頁面和請求內(nèi)容碗啄。
  2. 新打開的頁面為下級權(quán)限的頁面和請求內(nèi)容(包括跳轉(zhuǎn)到指定的頁面)质和。
    解決方法:這就相當(dāng)于有2個用戶權(quán)限的頁面了,但是考慮到一個瀏覽器只能登錄一個用戶稚字,目前只能想到利用路徑參數(shù)來解決饲宿,這個步驟一共4步。
    分別為:
    步驟一:傳參數(shù)
    步驟二:存參數(shù)
    步驟三:后臺請求中用參數(shù)
    步驟四:跳轉(zhuǎn)的頁面用參數(shù)
  • 步驟一:
    傳參數(shù)胆描。
    如下圖3所示瘫想,跳轉(zhuǎn)時新打開一個頁面,帶路徑參數(shù)uid(用戶id)和dataUrl(新打開的目標頁面)
    圖3.png

    代碼為:
goToHomePage(row) {
      //TODO 這里的uid可能為后臺數(shù)據(jù)給的userId
      //上線的測試
      let uid = row.user_id
      let dataUrl = 'modules/t-lodge/index.html/#/room-device'
      // let url = `${window.parent.location.href.split('?')[0]}?uid=${uid}&dataUrl=${dataUrl}`
      let url = `${location.href.split('?')[0]}?uid=${uid}&dataUrl=/room-device/#/room-device`
      window.open(url)
      // 本地測試
      // let locationUrlPre = location.href.split('#')[0]
      // window.open(`${locationUrlPre}?uid=${uid}#/room-device`)
    },
  • 步驟二:
    存參數(shù)昌讲。
    如圖4殿托,根據(jù)路徑參數(shù)把uid和daraUrl存儲在store里面【store比http先加載】
    圖4.png

    代碼為:
let myUid = ''
let dataUrl = ''
if (location.search) {
  function handleUrl(str) {
    let obj = {}
    let arr = str.split('&')
    arr.map((item) => {
      let itemArr = item.split('=')
      obj[itemArr[0]] = itemArr[1]
    })
    return obj
  }
  // let searchObj = new URLSearchParams(location.search.substring(1, location.search.length - 1))
  // myUid = searchObj.get('uid') || ''
  // dataUrl = searchObj.get('dataUrl') || ''
  //兼容IE(URLSearchParams不兼容IE)
  let searchObj = handleUrl(location.search.substring(1, location.search.length - 1))
  myUid = searchObj.uid || ''
  dataUrl = searchObj.dataUrl || ''
}
//store里的參數(shù)
state: {
    uid: myUid,
    dataUrl: dataUrl,
    screenWidth: document.documentElement.clientWidth, //屏幕寬度
  }
  • 步驟三:
    后臺請求中用參數(shù)。
    如圖5剧蚣,如果store里面存在uid,則設(shè)置headers里面設(shè)置添加user_id旋廷,沒有uid則不設(shè)置(這里的headers是axios請求共用的鸠按,設(shè)置一次就行),登錄后每個請求都帶有cookie饶碘,如圖6目尖,后臺根據(jù)user_id判斷用戶的請求,如果有user_id則請求user_id用戶的數(shù)據(jù)扎运,沒有user_id則請求登錄cookie用戶的數(shù)據(jù)瑟曲。
    圖5.png

    代碼為:
axios.interceptors.request.use(config => {
  if (store.state.uid) {
    config.headers.user_id = store.state.uid
  }
  return config
}, err => {
  return Promise.reject(err)
})
圖6.png
  • 步驟四:
    跳轉(zhuǎn)的頁面用參數(shù)饮戳。
    如圖7所示,請求完菜單列表后洞拨,根據(jù)store里的dataUrl是否存在扯罐,判斷是否進入目標頁面dataUrl。
    圖7.png

    代碼為:
this.$api.getMenuInfo()
        .then(res => {
          if (res.data.code === 0) {
            //登錄成功 跳轉(zhuǎn)頁面 //TODO
            this.handleMenuList(res.data.menuList)
            let uid = this.$store.state.uid
            if (uid) { //主頁跳轉(zhuǎn)進來的烦衣,有uid同時必須有dataUrl
              this.goToThisPage(this.$store.state.dataUrl)
            } //直接登錄進來的
            else {
              this.goToThisPage('/')
            }
          }
          else {
            this.$message.error(res.data.msg)
          }
        })

上面代碼中的getMenuInfo為請求歹河,handleMenuList,goToThisPage為自己定義的跳轉(zhuǎn)頁面的方法花吟。
問題:跳轉(zhuǎn)的頁面秸歧,每次刷新都會跳轉(zhuǎn)到路徑參數(shù)指定的頁面,因為指定頁面和用戶id是一起的衅澈,不能刪除

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末键菱,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子今布,更是在濱河造成了極大的恐慌经备,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件险耀,死亡現(xiàn)場離奇詭異弄喘,居然都是意外死亡,警方通過查閱死者的電腦和手機甩牺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門蘑志,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人贬派,你說我怎么就攤上這事急但。” “怎么了搞乏?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵波桩,是天一觀的道長。 經(jīng)常有香客問我请敦,道長镐躲,這世上最難降的妖魔是什么霎肯? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任墨坚,我火速辦了婚禮士八,結(jié)果婚禮上恭应,老公的妹妹穿的比我還像新娘聋丝。我一直安慰自己冰啃,他們只是感情好枫攀,可當(dāng)我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布偎快。 她就那樣靜靜地躺著,像睡著了一般入录。 火紅的嫁衣襯著肌膚如雪蛤奥。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天僚稿,我揣著相機與錄音凡桥,去河邊找鬼。 笑死贫奠,一個胖子當(dāng)著我的面吹牛唬血,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播唤崭,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼拷恨,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了谢肾?” 一聲冷哼從身側(cè)響起腕侄,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎芦疏,沒想到半個月后冕杠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡酸茴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年分预,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片薪捍。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡笼痹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出酪穿,到底是詐尸還是另有隱情凳干,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布被济,位于F島的核電站救赐,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏只磷。R本人自食惡果不足惜经磅,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望钮追。 院中可真熱鬧馋贤,春花似錦、人聲如沸畏陕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惠毁。三九已至犹芹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鞠绰,已是汗流浹背腰埂。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蜈膨,地道東北人屿笼。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像翁巍,于是被迫代替她去往敵國和親驴一。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,937評論 2 361