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

小云云
リリース: 2023-03-19 14:28:01
オリジナル
1862 人が閲覧しました

この記事では主に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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!