快捷導(dǎo)航

Vue3中導(dǎo)航守衛(wèi)結(jié)合Axios實(shí)現(xiàn)token認(rèn)證機(jī)制

更新時(shí)間：2025年01月24日 08:29:49 作者：匹馬夕陽

本文主要介紹了Vue3中導(dǎo)航守衛(wèi)結(jié)合Axios實(shí)現(xiàn)token認(rèn)證機(jī)制,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在Vue 3中，導(dǎo)航守衛(wèi)（Navigation Guard）用于攔截路由的變化，可以在用戶訪問頁面前進(jìn)行檢查。結(jié)合Axios進(jìn)行token認(rèn)證機(jī)制時(shí)，我們可以通過導(dǎo)航守衛(wèi)在路由跳轉(zhuǎn)時(shí)，檢查用戶的認(rèn)證狀態(tài)，確保用戶有有效的token進(jìn)行認(rèn)證。

1. 安裝必要的依賴

首先，確保你已經(jīng)安裝了 axios，這是我們用來發(fā)起 HTTP 請求的庫。

npm install axios

2. 創(chuàng)建 axios 實(shí)例

我們通常會(huì)創(chuàng)建一個(gè)封裝了token認(rèn)證邏輯的 axios 實(shí)例，便于管理所有請求。

// src/utils/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // 設(shè)置基本的 API 地址
  timeout: 5000, // 設(shè)置請求超時(shí)
});

// 請求攔截器
instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token'); // 從localStorage獲取token
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`; // 在請求頭中加入token
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 響應(yīng)攔截器
instance.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    // 如果響應(yīng)返回 401，表示未授權(quán)，可以跳轉(zhuǎn)到登錄頁面
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

export default instance;

3. 在 router.js 中使用導(dǎo)航守衛(wèi)

接下來，在 router.js 中配置路由的導(dǎo)航守衛(wèi)，檢查每次路由跳轉(zhuǎn)前的用戶認(rèn)證狀態(tài)。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import axios from '../utils/axios'; // 導(dǎo)入axios實(shí)例
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }, // 需要認(rèn)證的頁面
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

// 全局前置守衛(wèi)
router.beforeEach(async (to, from, next) => {
  const token = localStorage.getItem('token');
  
  if (to.meta.requiresAuth) {
    if (!token) {
      // 如果目標(biāo)路由需要認(rèn)證且沒有token，跳轉(zhuǎn)到登錄頁
      return next({ name: 'Login' });
    }
    
    try {
      // 如果有token，驗(yàn)證token是否有效
      const response = await axios.get('/verify-token'); // 假設(shè)后端提供了驗(yàn)證token的接口
      if (response.status === 200) {
        next(); // token有效，允許繼續(xù)訪問
      }
    } catch (error) {
      // token無效或請求失敗，跳轉(zhuǎn)到登錄頁
      localStorage.removeItem('token'); // 清除無效token
      next({ name: 'Login' });
    }
  } else {
    next(); // 不需要認(rèn)證的頁面，直接訪問
  }
});

export default router;

4. 處理登錄與登出邏輯

在用戶登錄時(shí)，我們會(huì)獲取token并將其存儲在 localStorage 中；登出時(shí)，我們需要清除token。

// src/views/Login.vue
<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="Username" />
      <input v-model="password" type="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from '../utils/axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/login', {
          username: this.username,
          password: this.password,
        });
        const token = response.data.token;
        localStorage.setItem('token', token); // 保存token
        this.$router.push('/'); // 登錄成功后跳轉(zhuǎn)到首頁
      } catch (error) {
        console.error('Login failed:', error);
      }
    },
  },
};
</script>

// src/views/Home.vue
<template>
  <div>
    <h1>Welcome Home</h1>
    <button @click="handleLogout">Logout</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleLogout() {
      localStorage.removeItem('token'); // 清除token
      this.$router.push('/login'); // 跳轉(zhuǎn)到登錄頁
    },
  },
};
</script>

5. 使用場景

這個(gè) token 認(rèn)證機(jī)制可以應(yīng)用于任何需要用戶登錄的頁面。例如，用戶在訪問需要身份認(rèn)證的頁面（如首頁）時(shí)，首先會(huì)觸發(fā)導(dǎo)航守衛(wèi)，在守衛(wèi)中驗(yàn)證 token 是否有效。如果沒有有效的 token，用戶會(huì)被重定向到登錄頁面。

場景總結(jié)：

首頁 (/): 需要 token 來驗(yàn)證用戶身份。導(dǎo)航守衛(wèi)檢查 token 是否存在并有效。
登錄頁 (/login): 用戶輸入用戶名和密碼后，向后端發(fā)送請求，獲取并存儲 token。
全局登出: 用戶登出時(shí)，清除 token 并跳轉(zhuǎn)到登錄頁。

6. 總結(jié)

通過上述步驟，我們已經(jīng)實(shí)現(xiàn)了：

使用 axios 進(jìn)行 token 的請求頭設(shè)置與認(rèn)證。
在 Vue 3 的路由中使用導(dǎo)航守衛(wèi)攔截認(rèn)證邏輯。
在登錄時(shí)保存 token，并在用戶訪問需要認(rèn)證的頁面時(shí)檢查 token 是否有效。

這種認(rèn)證機(jī)制可以有效地保證用戶在訪問敏感頁面時(shí)，必須通過認(rèn)證，而不會(huì)直接跳過認(rèn)證過程。

到此這篇關(guān)于Vue3中導(dǎo)航守衛(wèi)結(jié)合Axios實(shí)現(xiàn)token認(rèn)證機(jī)制的文章就介紹到這了,更多相關(guān)Vue3 token認(rèn)證機(jī)制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: