vue-router防跳牆控制

vue-router防跳牆控制

由於在實際開發中，從本身的角度來看，發現能夠經過地址欄輸入地址，即可以進入本沒有權限的網頁。而咱們通常只是操做登陸頁面，其餘頁面不多考慮，此刻特來嘗試解決一下

• 基於vue-router使用

思路

• 頁面初始結構

<el-row class="tac">
  <el-col :span="6">
    <h5>默認顏色</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>導航一</span>
        </template>

        <el-menu-item-group>
          <router-link to="/nav_menu/nav_menu_one">
            <el-menu-item index="1-1">選項1</el-menu-item>
          </router-link>
          <router-link to="/nav_menu/nav_menu_two">
            <el-menu-item index="1-2">選項2</el-menu-item>
          </router-link>
          <router-link to="/nav_menu/nav_menu_three">
            <el-menu-item index="1-3">選項3</el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-col>
  <el-col :span="6">
    <router-view />
  </el-col>
</el-row>

• 效果圖
  

• 經過請求後，獲取用戶可顯示的菜單欄 (假設指定選項2沒法顯示)

js

data() {
    return {
        user: {}
    }
},   
created() {
    this.getUserInfo()
},
methods: {
    /**
    * 用戶信息
    */
    getUserInfo() {
        // 假設用戶信息
        const USER_INFO = ['one', 'three']
        //開始進行添加
        for (let item of USER_INFO) {
            this.user[item] = true
        }  
    },
}

html 對每一個連接添加 v-if="user.**" 能夠進行指定顯示

<el-menu-item-group>
    <router-link to="/nav_menu/nav_menu_one" v-if="user.one">
    <el-menu-item index="1-1">選項1</el-menu-item>
    </router-link>
    <router-link to="/nav_menu/nav_menu_two" v-if="user.two">
    <el-menu-item index="1-2">選項2</el-menu-item>
    </router-link>
    <router-link to="/nav_menu/nav_menu_three" v-if="user.three">
    <el-menu-item index="1-3">選項3</el-menu-item>
    </router-link>
</el-menu-item-group>

• 效果圖
  

可是這樣並不能防止跳牆，假設在地址欄中輸入指定的地址

能夠看到，本不該該顯示選項2的，結果依舊能夠顯示

• 再對路由進行加工處理

  利用 meta 進行處理 meta: { flag: ** }

{
    path: '/nav_menu',
    name: 'NavMenu',
    component: () => import('./../components/NavMenu.vue'),
    children: [
    { path: 'nav_menu_one',   meta: {flag: 'one'},  component: () => import('./../components/NavMenuOne.vue') },
    { path: 'nav_menu_two',   meta: {flag: 'two'},  component: () => import('./../components/NavMenuTwo.vue') },
    { path: 'nav_menu_three', meta: {flag: 'three'},  component: () => import('./../components/NavMenuThree.vue')},
    ]
},

業務邏輯處理

router.beforeEach((to, from, next) => {
  // 假設顯示的數據
  const USER_MENU = ['one', 'three'] 
  // ---------------------------------------
  if (USER_MENU.includes(to.meta.flag)) {
    next()
  } else {
    if (to.path === '/error') {
      next()
    } else {
      next('/error')
    }
  }
})

• 效果圖
  

至此，咱們的要求就暫時完成了

總結

• 在測試過程當中，會有相應的一些問題。特別是考慮到，如何拿到數據，這個可能會有點麻煩，須要仔細再仔細
• 我的以爲待優化的地方是，每一個連接都須要添加v-if，目前沒有想到更好的替代
• 因爲須要指定 字段 於是須要與後臺溝通好

最後但願能拋磚引玉，能有更優的解決方案