VueはWebサイトのフロントデスクでの権限管理を実現します

この記事では主に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. グローバルフックルーターでルーティングをインターセプトします。beforeEach

このステップは具体的な処理プロセスは次のとおりです:

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

具体的なコードは次のとおりです:

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 非同期操作 store.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 つのアクセス許可) のみを区別します。

この一連の練習でさらに試して、一つずつ書いていきます。私も初心者なので、まだまだ先は長いです。 。 。

関連する推奨事項:

TP5 認証権限管理の例

PHP で権限管理機能を実装する方法

Linux ユーザーと権限管理機能

以上がVueはWebサイトのフロントデスクでの権限管理を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。