ルートガード

Vue 3 は、ルーティング管理とナビゲーション制御に Vue Router 4 を使用します。Vue Router は、ルートガードを実装するためのいくつかのフック関数を提供します。

ルートガードは、ルートが変更されたときに呼び出される特別な関数であり、権限の確認、ログインステータスのチェック、ページジャンプなどの一部の操作を実行するために使用できます。Vue Router 4 では、ルーティングガードは、グローバルガード、ルーティング専用ガード、およびコンポーネントガードの 3 つのタイプに分類できます。

グローバルガード

グローバルガードは、すべてのルートがジャンプするときに呼び出され、権限検証やルートジャンプ統計などの一部のグローバル操作を実行するために使用できます。グローバルガードには 3 つのタイプがあります。

beforeEach(to, from, next): ルーティングジャンプの前に呼び出され、アクセス許可の検証、ルーティングジャンプのインターセプトなど、いくつかの前処理操作を実行できます。配線ジャンプを続行したい場合は、next() 関数を呼び出す必要があります。
afterEach(to, from): ルーティングジャンプが完了した後に呼び出され、ページジャンプ統計やログレコードなどの後処理操作を実行できます。
beforeResolve(to, from, next): ルートが解決された後に呼び出され、ルートが非同期で読み込まれるときに、関連するすべてのコンポーネントが解決されるのを待つために使用されます。配線ジャンプを続行したい場合は、next() 関数を呼び出す必要があります。

beforeEach を例として取り上げます (router.js)

import store from '../store/index.js'


// 路由守卫
router.beforeEach((to, from, next) => {

  // console.log("store", store.state.uInfo)
  // 判断是否登录
  const uInfo = store.state.uInfo.userInfo;

  if (!uInfo.userName) {
    if (to.path === '/login') {
      next();
      return;
    }
    next('/login');
  }
  else {
    next();
  }
})

ログイン状態の保存

Vue 3 では、Vue の応答状態管理機能と、ブラウザーが提供する localStorage または sessionStorage API を使用して、ログイン状態を保存できます。

//在用户登录后将信息存储在localStorage中
localStorage.setItem('user', JSON.stringify(user))

//在用户注销时删除存储的信息
localStorage.removeItem('user')

//在应用程序初始化时检查用户是否已登录
const user = JSON.parse(localStorage.getItem('user'))
const isAuthenticated = user !== null

//将登录状态存储在响应式状态中
import { reactive } from 'vue'

const state = reactive({
  isAuthenticated: false
})

//在登录时更新状态
state.isAuthenticated = true

//在注销时更新状态
state.isAuthenticated = false

上の例では、localStorage を使用してユーザー情報をローカルブラウザーに保存し、Vue の応答状態管理機能を使用してログイン状態を保存します。ユーザーがログインすると、その情報が localStorage に保存され、リアクティブ状態で isAuthenticated プロパティが true に設定されます。ユーザーがログアウトすると、localStorage に保存されている情報が削除され、isAuthenticated プロパティが false に設定されます。アプリケーションの初期化時に、ユーザー情報が localStorage に存在するかどうかを確認し、存在する場合は isAuthenticated プロパティを true に設定します。

localStorageの使用法

Vue3 では、localStorage.setItemブラウザのローカルストレージにデータを保存するために使用されます。setItemメソッドは、キーと値のペアをローカルストレージに追加するために使用されます。最初のパラメータはキーで、2 番目のパラメータは値です。使用方法の例を次に示します。

localStorage.setItem('key', 'value');

getItem次のメソッドを使用して値を取得できます。

localStorage.getItem('key');

localStorage.removeItem指定されたキーと値のペアをローカルストレージから削除するために使用されます。使用方法の例を次に示します。

localStorage.removeItem('key');

例：

const login = () => {

                store.commit('setUserInfo', data.loginData);

                // 设置本地存储数据 localStorage.setItem('key', 'value');
                localStorage.setItem('loginData', JSON.stringify(data.loginData))

                router.push({
                    path: '/user',
                });
            }

店

export default {

    namespace: true,

    state: {
        // localStorage.getItem('key');
        userInfo: localStorage.getItem('loginData') && JSON.parse(localStorage.getItem('loginData')) || {},
    },

    mutations: {
        setUserInfo(state, uInfo) {
            state.userInfo = uInfo;
        }

    }



}

ログアウトするとき

  const loginOut = () => {
                localStorage.removeItem('loginData');
                store.state.uInfo.userInfo = {};
                router.push({
                    path: '/login',
                })
            }

Vue3 のルートガードとログイン状態のストレージ

ルートガード

ログイン状態の保存

おすすめ

Vue3 のルート ガードとログイン状態のストレージ

ルートガード

ログイン状態の保存

おすすめ

Vue3 のルートガードとログイン状態のストレージ