vueを使った権限管理機能の実装方法

この記事では主に、Vue をベースにした Web サイトのフロントエンドの権限管理 (フロントエンドとバックエンドの分離の実践) を紹介し、参考にさせていただきます。

JavaScript は現在人気の言語として広く使用されており、フロントエンドからバックエンドまであらゆる場所で使用されており、CMS システムやその他のデータ分析などのフロントエンド ページを開発するプロジェクト内でも広く使用されています。私はこれに非常に興味があり、放課後の学習用のハット カードの延長として使用しています。
JavaScriptのフレームワークはたくさんありますが、基本的な原理はほぼ同じなので、暫定的に国内の人が開発したvue.jsを選択しました。 vue.js を覚えてから 1 週間以上が経ちましたが、vue の主な用途と言えば、規模に応じて Declarative Rendering、Component System、Client-side Routing、Vue-resource、Axios、Vuex くらいです。プロジェクトの学習 vue 小さなことですが、重要なことは、フロントエンドとバックエンドを分離するコンポーネントベースの Web 開発が本当に実践したいことです。

たまたま私の個人ウェブサイト CodeSheep で最近バックエンド管理を開発する必要があったので、vue を使用して実装しました。バックエンド管理に関して、避けられない問題は権限管理です。フロントエンドとバックエンドを分離するという考えを実践したいので、バックエンドによって管理されるすべての Web フロントエンドのものはフロントエンドによって独立して完了する必要があります。これには非常に重要なフロントエンド制御が含まれます。権限に基づいて関連するものを管理します。私たちが実現したいのは、異なる権限が異なるルートに対応することです。同時に、ページのサイドバーも、異なる権限を持つユーザーにバックグラウンド管理中に表示されるように、対応するメニューを非同期的に生成する必要があります。インターフェイスのメニューが異なるため、ログインと権限の確認のための一連のプロセスが存在します。
具体的な実装

1.「ログイン」ボタンをクリックしてログインイベントをトリガーします

this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
 this.$router.push({ path: '/' }); //登录成功之后重定向到首页
}).catch(err => {
 this.$message.error(err); //登录失败提示错误
});

非同期にトリガーされるアクションLoginByEmailの処理内容は以下の通りです:

LoginByEmail ({ commit }, userInfo) {
   const email = userInfo.email.trim()
   return new Promise((resolve, reject) => {
    loginByEmail(email, userInfo.password).then(response => {
     const data = response.data
     setToken(response.data.token)
     commit('SET_TOKEN', data.token)
     resolve()
    }).catch(error => {
     reject(error)
    })
   })
  }

やりたいことが取得であることが簡単にわかります。サーバーからのトークン (ユーザーの唯一の識別情報) がブラウザーのローカル Cookie に配置されます

2. グローバルフックルーターでルーティングをインターセプトする前に

このステップが核心です。以下の通り:

ルートインターセプト処理プロセス

具体的なコードは以下の通り:

router.beforeEach((to, from, next) => {
 if (getToken()) { // 判断是否取到token
  if (to.path === '/login') {
   next({ path: '/' })
  } else {
   if (store.getters.roles.length === 0) { // 判断当前用户是否已获取完user_info信息
    store.dispatch('GetInfo').then(res => { // 获取user_info
     const roles = res.data.role
     store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
      router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
      next({ ...to }) // 放行路由
     })
    }).catch(() => {
     store.dispatch('FedLogOut').then(() => {
      next({ path: '/login' })
     })
    })
   } else {
    next() // 放行该路由
   }
  }
 } else {
  if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单里的路径，继续让其访问
   next()
  } else { // 其他不在白名单里的路径全部让其重定向到登录页面！
   next('/login')
   alert('not in white list, now go to the login page')
  }
 }
})

フローチャートのいくつかの重要なステップを説明:

フロントエンドがトークンを取得したかどうかを判断: getToken()

操作は非常に簡単で、主にトークンが取得済みかどうかを確認するためにCookieから取得します:

export function getToken () {
 return Cookies.get(TokenKey)
}

vuex非同期操作store.dispatch('GetInfo'): ユーザー情報を取得します

  GetInfo ({ commit, state }) {
   return new Promise((resolve, reject) => {
    getInfo(state.token).then(response => {
     const data = response.data
     console.log(data)
     commit('SET_ROLES', data.role)
     commit('SET_NAME', data.name)
     resolve(response)
    }).catch(error => {
     reject(error)
    })
   })
  }

操作も非常に簡単ですgetrestful API を使用してサーバーからユーザーのロールと名前を取得します

vuex 非同期操作ストア .dispatch('GenerateRoutes', {roles }): 異なるロールに基づいて異なるフロントエンド ルートを生成します

  GenerateRoutes ({ commit }, data) {
   return new Promise(resolve => {
    const { roles } = data
    let accessedRouters
    if (roles.indexOf('admin') >= 0) {
     accessedRouters = asyncRouter
    } else {
     accessedRouters = filterAsyncRouter(asyncRouter, roles)
    }
    commit('SET_ROUTERS', accessedRouters)
    resolve()
   })
  }

コードからわかるように、管理者ロール admin と他の通常のユーザー (つまり、非 Aadmin の 2 種類の権限) を区別しているだけです

今後、この一連の実践ではさらに多くの試みが行われる予定で、それらは 1 つずつ作成される予定です。 1つ目は私も初心者で、道のりは長いです。 。 。

上記は私があなたのためにまとめたものです。

関連記事:

vue2.0で通信を実装するには?

Angular 2+ でのスタイル バインディングの方法は何ですか?

jQuery の on と click の違いは何ですか?

jQueryのonとclickの違いは何ですか?

淘宝網のJSsearchを模倣する(詳細なチュートリアル)

以上がvueを使った権限管理機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。