目錄

• 前言
• 一、配置路由導航守衛
• 1. 全域性導航守衛
• 2. 區域性導航守衛
• 二、使用者登入
• 1. axios配置
• 2. 使用者登入程式碼
• 三、使用者退出
• 1. 實現程式碼
• 總結

前言

之前在的學習中通過路由導航守衛控制實現了使用者登入模組的功能，現在再次做專案時又要通過Vue配置路由導航守衛來實現相同的功能，在此將實現過程進行記錄與總結（本文基於Vue2.x進行實現）

提示：以下是本篇文章正文內PRgzTJHP容，下面案例可供參考

一、配置路由導航守衛

1. 全域性導航守衛

如果專案中只有後臺的情況，在Vue中配置全域性導航守衛即可，設定全域性路由導航守衛後只要啟動該專案，使用者沒有登入的話只能跳轉到登入頁面，不允許跳轉到其它介面

router.beforeEach((to,from,next) => {
  // 如果訪問的是登入介面則直接放行
  if (to.paPRgzTJHPth === '/login') return next()
  //獲取使用者頁面token資訊
  let token = window.sessionStorage.getItem('token')
  //如果token資料為null則跳轉到指定路徑
  if (!token) return next("/login")
  next()
})

引數解釋：

• to：要跳轉到哪個介面
• from：要從哪個介面進行跳轉
• next：代表next()函式，作用為放行

2. 區域性導航守衛

在專案開發中還有一種情況為要同時開發前臺和後臺，而此時路由導航守衛就不能進行全域性配置，因為前臺介面要展示給使用者，即使使用者在沒有登入的情況下也能夠進行訪問，因此路由導航守衛要攔截的路由只有後臺的路徑。

仍然是在index.js資料夾下配置路由導航守衛，只不過這次配置是為單個元件進行配置。

例如在我的這個專案中Welcome元件為後臺元件，現在要為該元件配置路由導航守衛，首先要將全域性配置的beforeEach更換為beforeEnter

作者之前就是在登入元件中配置的路由導航守衛，結果沒有作用，在這裡記錄下來，以後不犯這樣的錯誤。在元件中新增以下程式碼即可：

// 定義路由導航守衛
    beforeEnter(to,next) {
      //獲取使用者頁面token資訊
      let token = window.sessionStorage.getItem('token')
      //如果token資料為null 則跳轉到指定路徑
      if (!token) return next("/login")
      next()
    }

區域性導航守衛的引數作用與全域性配置的引數作用一致，除了將beforeEach更換為beforeEnter以外其餘全部一致，在此不多做贅述。

二、使用者登入

在這裡只進行展示前臺程式碼，後臺程式碼寫法每個人有每個人的風格和寫法，在此就不做展示。

1. axios配置

為了避免專案中出現回撥地獄的問題，在這裡我匯入了axios外掛，在main.js檔案中提前對axios進行了配置

/* 匯入axios包 */
import axios from 'axios'

/* 設定axios的請求根目錄 */
axios.defaults.baseURL = 'http://localhost:8089/'
/* 向vue物件中新增全域性物件 以後傳送ajax請求使用$http物件 */
Vue.prototype.$http = axios

因為在main.js檔案中進行了全域性配置，因此在元件中出現$http代表設定的請求根目錄，在這裡為http://localhost:8089/

2. 使用者登入程式碼

// 當點選登入按鈕時向後臺傳送資料
login() {
  this.$refs.loginFormRef.validate(async valid => {
    if(!valid) return
    const {data: result} = await this.$http.post("/user/login",this.loginForm)
    // 如果返回的引數中狀態碼不為200，則代表登入失敗
    if(result.status !== 200) return this.$message.error("使用者登入失敗")
    this.$message.success("使用者登入成功")
    //登入成功之後,將token資訊儲存到session中
    window.sessionStorage.setItem('token',result.data)
    //跳轉到後臺管理系統首頁
    this.$router.push("/welcome")
})

三、使用者退出

使用者退出時只需要將Session中的token資料刪除後再跳轉到其它頁面即可，此時路由導航守衛再次生效，因此在前臺就可以實現，不需要連線後端。

1. 實現程式碼

logout() {
  //1.刪除session中的資料
  window.sessionStorage.clear()
  //2.使用者訪問登入頁面
  this.$routPRgzTJHPer.push('/login')
}

總結

以上便是在Vue中配置路由導航守衛後實現使用者登入和退出的功能，在實現中分了兩種情況，分別為專案中只能登入後才能訪問介面和即使使用者不登入也能夠瀏覽前臺的兩http://www.cppcns.com種情況。對於第一種情況來說只需要進行全域性配置即可，對於第二種情況則需要在登入後要跳轉的元件中配置單元件路由導航即可。

到此這篇關於Vue2.x配置路由導航守衛實現使用者登入和退出的文章就介紹到這了,更多相關Vue 路由守衛登入退出內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！