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

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

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

路由守衛(wèi)

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

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

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

全局守衛(wèi)

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

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

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

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

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

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

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

const state = reactive({
  isAuthenticated: false
})

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

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

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

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

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

localStorage的用法

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

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

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

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

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

localStorage.getItem('key');

localStorage.removeItem用于從本地存儲(chǔ)中刪除指定的鍵值對(duì)。

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

localStorage.removeItem('key');

例子：

const login = () => {

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

                // 設(shè)置本地存儲(chǔ)數(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;
        }

    }
}

退出登錄時(shí)

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