Vueプロジェクトで権限制御とログイン認証を行う方法

Vue プロジェクトで権限制御とログイン検証を実行する方法には、特定のコード例が必要です。

Vue プロジェクトでは、権限制御とログイン検証は非常に重要な機能です。適切な権限制御とログイン検証により、ユーザーは権限のあるページのみにアクセスできるようになり、ユーザー データのセキュリティが保護されます。この記事では、Vue プロジェクトで権限制御とログイン検証を実装する方法と、具体的なコード例を詳しく紹介します。

ステップ 1: ルーティングと状態管理を導入する

まず、Vue が提供するルーティングと状態管理を使用して、権限制御とログイン検証を実装する必要があります。 Vue Router を使用してページのルーティングを管理し、Vuex を使用してユーザーのステータスを管理できます。

プロジェクトのエントリ ファイル main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import routes from './router/index.js' // 引入路由配置文件
import store from './store/index.js' // 引入Vuex配置文件

Vue.use(VueRouter)
Vue.use(Vuex)

const router = new VueRouter({
  routes
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

で Vue Router と Vuex を導入して構成します ##router フォルダーに # を作成します ##ルーティング情報の構成に使用されるindex.js ファイル:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Admin from '@/views/Admin.vue'
import Dashboard from '@/views/Dashboard.vue'
import Users from '@/views/Users.vue'
import NotFound from '@/views/NotFound.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/admin',
      name: 'admin',
      component: Admin,
      children: [
        {
          path: '',
          name: 'dashboard',
          component: Dashboard
        },
        {
          path: 'users',
          name: 'users',
          component: Users
        }
      ]
    },
    {
      path: '*',
      name: 'notfound',
      component: NotFound
    }
  ]
})

Vuex 状態管理の構成に使用される

index.js ファイルを store フォルダーに作成します。 :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    isLoggedIn: false
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    },
    SET_LOGGED_IN(state, value) {
      state.isLoggedIn = value
    }
  },
  actions: {
    login({ commit }, user) {
      // 在这里进行登录验证的逻辑
      // 成功后设置用户信息和登录状态
      commit('SET_USER', user)
      commit('SET_LOGGED_IN', true)
    },
    logout({ commit }) {
      // 退出登录，清除用户信息和登录状态
      commit('SET_USER', null)
      commit('SET_LOGGED_IN', false)
    }
  }
})

第 2 ステップ: ログイン ページの実装

次のステップは、ユーザーがログインするログイン ページを実装することです。ユーザーがユーザー名とパスワードを入力して送信するためのフォームを

Login.vue コンポーネントに追加できます。

<template>
  <div class="login">
    <form @submit.prevent="submit">
      <input type="text" v-model="username" placeholder="请输入用户名">
      <input type="password" v-model="password" placeholder="请输入密码">
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submit() {
      // 在这里调用登录接口进行验证
      // 异步返回结果后触发登录操作
      this.$store.dispatch('login', {
        username: this.username,
        password: this.password
      }).then(() => {
        // 登录成功后跳转到首页或其他页面
        this.$router.push('/')
      }).catch(() => {
        // 登录失败逻辑处理
      })
    }
  }
}
</script>

ステップ 3: ログイン検証と権限制御を実装する

次に、ログイン検証と権限制御が必要なページで、対応するロジック処理を実行する必要があります。たとえば、

Admin.vue コンポーネントでは、created フック関数でログイン検証と権限制御ロジックを実行できます。

<template>
  <div class="admin">
    <h1 id="管理员页面">管理员页面</h1>
    <!-- 其他内容... -->
  </div>
</template>

<script>
export default {
  created() {
    if (!this.$store.state.isLoggedIn) {
      // 未登录状态，跳转到登录页面
      this.$router.push('/login')
    } else {
      // 已登录状态，进行权限控制
      if (!this.$store.state.user.isAdmin) {
        // 非管理员用户，无权限访问
        this.$router.push('/404')
      }
    }
  }
}
</script>

この例では、

created フック関数でユーザーのログイン状態と権限を判定し、判定結果に基づいて対応するジャンプ操作を実行します。

これは、基本的な Vue プロジェクトに権限制御とログイン検証を実装する例です。ルーティングやステータス管理を適切に設定し、対応するロジック処理を記述することで、ユーザーのログイン検証や権限制御機能を実装できます。もちろん、実際のプロジェクトでは、ルーティング ガードの追加、フロントエンドとバックエンドのインターフェイスの相互作用など、特定の要件に応じてより詳細な処理を実行する必要があります。この記事の例が、読者のアクセス許可制御とログイン検証の理解を深め、適用するのに役立つことを願っています。

以上がVueプロジェクトで権限制御とログイン認証を行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。