鍍金池/ 問(wèn)答/HTML/ vue-router頁(yè)面鑒權(quán)

vue-router頁(yè)面鑒權(quán)

問(wèn)題一:
我想實(shí)現(xiàn)的效果是,登陸之后可以跳轉(zhuǎn)到個(gè)人中心頁(yè)面
比如我現(xiàn)在的個(gè)人中心頁(yè)面url是這樣的

http://localhost:8089/user

在未登錄狀態(tài)下,是沒(méi)有按鈕可以點(diǎn)擊跳轉(zhuǎn)到這個(gè)路由下的,但是直接在瀏覽器輸入可以到達(dá)這個(gè)路由下
我現(xiàn)在在main.js下做的處理

router.beforeEach((to, from, next) => {
  // 判斷要去的路由界面是不是要鑒權(quán)
  if (to.meta.checkLogined) {
// 查看是否登陸
if (!store.state.userInfo) {
  // 沒(méi)登錄的做處理
  next({
    path: '/home'
  })
} else {
  // 登陸的正常跳
  next()
    }
  } else {
    // 不需要鑒權(quán)的正常跳
    next()
  }
})

路由router.js

   {
  path: '/user',
  name: 'user',
  meta: {checkLogined: true},
  component: user,
  children: [
    {
      path: '/user/openShow',
      name: 'openShow',
      component: openShow,
      children:[
        {
          path: '/user/openShow/step1',
          name: 'step1',
          meta: {checkLogined: true},
          component: step1
        }
       ]
     }]
   }

我更改的鑒定狀態(tài)發(fā)現(xiàn)正常點(diǎn)擊的情況下是可以處理的,但是在瀏覽器直接輸入地址還是無(wú)法處理。
另外,我在父路由做了鑒權(quán),其子路由依然需要單獨(dú)的增加meta屬性嗎?也就是說(shuō),父路由可以被攔截處理,但是加上子路由就不行?
問(wèn)題二: 我在子路由依然有一些權(quán)限需要來(lái)管理能否跳轉(zhuǎn),這樣的話又該怎么做?需要單獨(dú)寫(xiě)beforeEach來(lái)處理,還是統(tǒng)一寫(xiě)在mainjs里?

回答
編輯回答
黑與白

clipboard.png

2018年7月9日 15:29
編輯回答
夢(mèng)若殤

可以在總頁(yè)面,例如默認(rèn)的App.vue頁(yè)面的beforeCreated鉤子中獲取到配置的路由參數(shù)來(lái)判斷是否已經(jīng)有進(jìn)入權(quán)限,沒(méi)有就跳轉(zhuǎn)到指定的頁(yè)面去。這樣就可以控制直接在地址欄輸入路由來(lái)跳轉(zhuǎn)的情況。

希望我的回答能幫助到你,有不明白的地方歡迎評(píng)論留言!

2018年2月6日 22:09