addRoutes は動的許可ルーティングメニューを実装します-jsチュートリアル-php.cn

addRoutes は動的許可ルーティングメニューを実装します

不言

リリース： 2018-07-09 14:36:17

オリジナル

2734 人が閲覧しました

この記事では、addRoutes による動的許可ルーティングメニューの実装を主に紹介します。これには、必要な友人全員が参照できるようにしました。背景からナビゲーションメニューを実装するには、ログインユーザーの権限の違いによって、引き出されるナビゲーションメニューの効果が異なり、操作可能なインターフェイスも異なります。

問題

バックグラウンド管理システムは vue+vue-router+element-ui+vuex の組み合わせを使用するように準備されていますが、シングルページアプリケーションは vue-router をインスタンス化し、それを vue インスタンスに挿入してから、したがって、ログインページに入るときにルーティングを再カスタマイズする方法はありません。いろいろ検索した結果、vue-router がバージョン 2.0 でルートを追加する addRoutes メソッドを提供していることがわかり、一縷の望みが見えてきました。

苦労の末、ようやくこの機能を実現したので、同じニーズを持つ仲間の役に立てれば幸いです。

アイデア

1. まず、次のように、ログイン、404 ページなどの固定ルーティングアドレスをローカルに設定します。

import Vue from 'vue'
import Router from 'vue-router'
import store from '@/vuex/store'
Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      meta: {requireAuth: false},
      // 模块使用异步加载
      component: (resolve) => require(['../components/login/login.vue'], resolve)
    }]
})
// 拦截登录，token验证
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth === undefined) {
    if (store.state.token) {
      next()
    } else {
      next({
        path: '/login'
      })
    }
  } else {
    next()
  }
})
export default router

ログイン後にコピー

これらの固定ルートを設定した後、ログインページに移動できます。そうしないと、続行できません。の。

2. 次に、重要なステップは、返される必要がある許可メニューのリスト情報についてバックエンドのベテランと合意する必要があることです。ここでは、必要なルーティング構造を分析します。例。自分でルートを直接定義すると、次の構造になります:

let router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      meta: {requireAuth: false},
      component: (resolve) => require(['../components/login/login.vue'], resolve)
    }，
    {
        path: '/',
        redirect: '/layout'
    },
    {
        path: '/layout',
        component: (resolve) => require(['../layout.vue'], resolve),
        children: [
            {
                path: 'index', 
                meta: {
                    type: '1',       //控制是否显示隐藏 1显示，2隐藏
                    code: 00010001,  // 后面需要控制路由高亮
                    title: '首页',    // 菜单名称
                    permissonList: [] // 权限列表
                }
                component: (resolve) => require(['@/components/index/index.vue'], resolve)
            },
            {
            ...
            }      
        ]
    }]
})

ログイン後にコピー

上記の構造分析によると、実際に動的に構成する必要があるルートは実際には /layout の下の子部分であるため、バックエンドはすべてのルートを含むルートを返すには、配列で十分です

返されたデータでは、rootList は第 1 レベルのナビゲーションのリストであり、実際にはルーティング機能はありません。 2 番目のレベルのメニューを切り替えるトリガーとして使用します。subList は実際に必要なルーティング情報です。

3. パーミッションのルーティング情報を取得したら、データをローカルで処理して、必要なデータに組み立てる必要があります: addRoutes は動的許可ルーティングメニューを実装します

// 登录
      login () {
        let params = {
          account: this.loginForm.username,
          password: encrypt(this.loginForm.password)
        }
        this.loading = true
        this.$http.post(this.$bumng + '/login', this.$HP(params))
          .then((res) => {
            this.loging = false
            console.info('菜单列表：', res)
            if (res.resultCode === this.$state_ok) {
              // 合并一级菜单和二级菜单，便于显示
              let menus = handleMenu.mergeSubInRoot(res.rootList, res.subList)
              // 本地化处理好的菜单列表
              this.saveRes({label: 'menuList', value: menus})
              // 根据subList处理路由
              let routes = handleMenu.mergeRoutes(res.subList)
              // 本地化subList，便于在刷新页面的时候重新配置路由
              this.saveRes({label: 'subList', value: res.subList})
              // 防止重复配置相同路由
              if (this.$router.options.routes.length  {
            this.loging = false
            console.error('错误：', err)
          })
      },

ログイン後にコピー

メニューリストとサブリストを処理するメソッド: mergeSubInRoot と mergeRoutes

const routes = [
  {
    path: '/',
    redirect: '/layout'
  },
  {
    path: '/layout',
    component: (resolve) => require(['../layout.vue'], resolve),
    children: []
  }
]
export default {
  /**
   * 合并主菜单和子菜单
   * @param: rootList [Array] 主菜单列表
   * @param: subList [Array] 子菜单
   * */
  mergeSubInRoot (roots, subs) {
    if (roots && subs) {
      for (let i = 0; i  require([`@/components/${subs[i].component}.vue`], resolve),
          meta: {
            type: subs[i].type,
            code: subs[i].code,
            title: subs[i].name,
            permissionList: subs[i].permissionList
          }
        }
        routes[1].children.push(temp)
      }
    }
    return routes
  }
}

ログイン後にコピー

これまでのところ、パーミッションは正常に構成されています。ルーティングローカルルーティングを開始すると、私のシステムログインは次のようになります

フォローアップの最適化

addRoutes は動的許可ルーティングメニューを実装します 1. メニューリストの表示とセカンダリナビゲーションの切り替え:

<template>
    <p>
      <el-menu>
        <el-menu-item>
          <i></i>
          <span>{{item.name}}</span>
        </el-menu-item>
      </el-menu>
    </p>
</template>

<script>
  import {mapState, mapMutations} from &#39;vuex&#39;
  export default {
    name: &#39;menu&#39;,
    data () {
      return {
        msg: &#39;Welcome to Your Vue.js App&#39;
      }
    },
    computed: {
      ...mapState([&#39;menuList&#39;]),
      activeCode () {
          // 通过code保证在切换字路由的情况下一级路由也是高亮显示
        return this.$route.meta.code.substring(0, 4)
      }
    },
    methods: {
      ...mapMutations([&#39;saveRes&#39;]),
      // 切换二级路由
      switchSubMenu (route) {
        console.info(&#39;路由：&#39;, route)
        if (route.actUrl !== &#39;index&#39;) {
          // 用currentSubMenu控制二级路由数据  
          this.saveRes({label: &#39;currentSubMenu&#39;, value: route.children})
          this.$router.push(`/layout/${route.children[0].actUrl}`)
        } else {
          // 不存在二级路由隐藏二级 
          this.saveRes({label: &#39;currentSubMenu&#39;, value: &#39;&#39;})
          this.$router.push(`/layout/${route.actUrl}`)
        }
      }
    },
    filters: {
      splitCode (code) {
        return code.substring(0, 4)
      }
    }
  }
</script>

ログイン後にコピー

2. 単一ページのアプリケーションによって更新ルーティングが失われるのを防ぎます。リフレッシュ中は再初期化されます。解放前に戻ると、設定されたルートはすべて失われ、ローカルで設定されたルートのみがジャンプできます。このとき、app.vue で次のコードを実行できます (追記: どこで更新しても app.vue が実行されます):

<script>
  import {decrypt} from &#39;@/libs/AES&#39;
  import handleMenu from &#39;@/router/handleMenu&#39;
  export default {
    name: &#39;app&#39;,
    created () {
      // 当this.$router.options.routes的长度为1，且本地缓存存在菜单列表的时候才重新配置路由
      if (this.$router.options.routes.length <= 1 && sessionStorage.getItem(&#39;subList&#39;)) {
        let subList = JSON.parse(decrypt(sessionStorage.getItem(&#39;subList&#39;)))
        let routes = handleMenu.mergeRoutes(subList)
        this.$router.addRoutes(routes)
        // this.$router不是响应式的，所以手动将路由元注入路由对象
        this.$router.options.routes.push(routes)
      }
    }
  }
</script>

ログイン後にコピー

このようにすると、更新されてもルーティングが再構成されます。

3. ページボタンのレベル制御に関しては、これを行うためのコマンドをカスタマイズできます。対応するルートのメタオブジェクトに権限リストを入れているため、各ページで現在のユーザーが持つ権限に簡単に戻ることができます。 addRoutes メソッドが vue-router2

に追加されました。上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。