Vue3的路由守衛(wèi)以及登錄狀態(tài)儲存過程

更新時間：2024年08月30日 17:33:48 作者：依戀、陽光

這篇文章主要介紹了Vue3的路由守衛(wèi)以及登錄狀態(tài)儲存過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

路由守衛(wèi)

Vue 3使用Vue Router 4來進行路由管理和導(dǎo)航控制。Vue Router提供了一些鉤子函數(shù)來實現(xiàn)路由守衛(wèi)。

路由守衛(wèi)是一些特殊的函數(shù)，它們會在路由發(fā)生變化時被調(diào)用，可以用來進行一些操作，例如權(quán)限驗證、登錄狀態(tài)檢查、頁面跳轉(zhuǎn)等。

在Vue Router 4中，路由守衛(wèi)可以分為三種類型：全局守衛(wèi)、路由獨享守衛(wèi)和組件內(nèi)守衛(wèi)。

全局守衛(wèi)

全局守衛(wèi)會在所有路由跳轉(zhuǎn)時被調(diào)用，可以用來進行一些全局性的操作，例如權(quán)限驗證和路由跳轉(zhuǎn)統(tǒng)計。全局守衛(wèi)有三種類型：

beforeEach(to, from, next): 在路由跳轉(zhuǎn)前被調(diào)用，可以進行一些預(yù)處理操作，例如權(quán)限驗證、路由跳轉(zhuǎn)攔截等。如果要繼續(xù)路由跳轉(zhuǎn)，需要調(diào)用next()函數(shù)。
afterEach(to, from): 在路由跳轉(zhuǎn)完成后被調(diào)用，可以進行一些后處理操作，例如頁面跳轉(zhuǎn)統(tǒng)計、日志記錄等。
beforeResolve(to, from, next): 在路由解析完畢后被調(diào)用，用于異步路由加載時等待所有相關(guān)組件都解析完畢。如果要繼續(xù)路由跳轉(zhuǎn)，需要調(diào)用next()函數(shù)。

以beforeEach為例（router.js)

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


// 路由守衛(wèi)
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();
  }
})

登錄狀態(tài)儲存

在Vue 3中，可以使用Vue的響應(yīng)式狀態(tài)管理功能和瀏覽器提供的localStorage或sessionStorage API來存儲登錄狀態(tài)。

//在用戶登錄后將信息存儲在localStorage中
localStorage.setItem('user', JSON.stringify(user))

//在用戶注銷時刪除存儲的信息
localStorage.removeItem('user')

//在應(yīng)用程序初始化時檢查用戶是否已登錄
const user = JSON.parse(localStorage.getItem('user'))
const isAuthenticated = user !== null

//將登錄狀態(tài)存儲在響應(yīng)式狀態(tài)中
import { reactive } from 'vue'

const state = reactive({
  isAuthenticated: false
})

//在登錄時更新狀態(tài)
state.isAuthenticated = true

//在注銷時更新狀態(tài)
state.isAuthenticated = false

在上面的示例中，我們使用localStorage將用戶信息存儲在本地瀏覽器中，并使用Vue的響應(yīng)式狀態(tài)管理功能來存儲登錄狀態(tài)。

當(dāng)用戶登錄時，我們將其信息存儲在localStorage中，并將響應(yīng)式狀態(tài)中的isAuthenticated屬性設(shè)置為true。
當(dāng)用戶注銷時，我們刪除存儲在localStorage中的信息，并將isAuthenticated屬性設(shè)置為false。

在應(yīng)用程序初始化時，我們檢查localStorage中是否存在用戶信息，如果存在，則將isAuthenticated屬性設(shè)置為true。

localStorage的用法

在Vue3中，localStorage.setItem用于將數(shù)據(jù)存儲在瀏覽器的本地存儲中。

setItem方法用于向本地存儲添加鍵值對。第一個參數(shù)是鍵，第二個參數(shù)是值。

以下是如何使用它的示例：

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

您可以使用getItem方法檢索值：

localStorage.getItem('key');

localStorage.removeItem用于從本地存儲中刪除指定的鍵值對。

以下是如何使用它的示例：

localStorage.removeItem('key');

例子：

const login = () => {

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

                // 設(shè)置本地存儲數(shù)據(jù) localStorage.setItem('key', 'value');
                localStorage.setItem('loginData', JSON.stringify(data.loginData))

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

store

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',
                })
            }