前言

之前在Vue的學(xué)習(xí)中通過路由導(dǎo)航守衛(wèi)控制實現(xiàn)了用戶登錄模塊的功能，現(xiàn)在再次做項目時又要通過Vue配置路由導(dǎo)航守衛(wèi)來實現(xiàn)相同的功能，在此將實現(xiàn)過程進(jìn)行記錄與總結(jié)（本文基于Vue2.x進(jìn)行實現(xiàn)）

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、配置路由導(dǎo)航守衛(wèi)

1. 全局導(dǎo)航守衛(wèi)

如果項目中只有后臺的情況，在Vue中配置全局導(dǎo)航守衛(wèi)即可，設(shè)定全局路由導(dǎo)航守衛(wèi)后只要啟動該項目，用戶沒有登錄的話只能跳轉(zhuǎn)到登錄頁面，不允許跳轉(zhuǎn)到其它界面。
在安裝vue-router依賴時自動生成的router -> index.js文件夾下添加以下代碼

router.beforeEach((to, from, next) => {
  // 如果訪問的是登錄界面則直接放行
  if (to.path === '/login') return next()
  //獲取用戶頁面token信息
  let token = window.sessionStorage.getItem('token')
  //如果token數(shù)據(jù)為null則跳轉(zhuǎn)到指定路徑
  if (!token) return next("/login")
  next()
})

參數(shù)解釋：

• to：要跳轉(zhuǎn)到哪個界面
• from：要從哪個界面進(jìn)行跳轉(zhuǎn)
• next：代表next()函數(shù)，作用為放行

2. 局部導(dǎo)航守衛(wèi)

在項目開發(fā)中還有一種情況為要同時開發(fā)前臺和后臺，而此時路由導(dǎo)航守衛(wèi)就不能進(jìn)行全局配置，因為前臺界面要展示給用戶，即使用戶在沒有登錄的情況下也能夠進(jìn)行訪問，因此路由導(dǎo)航守衛(wèi)要攔截的路由只有后臺的路徑。

仍然是在index.js文件夾下配置路由導(dǎo)航守衛(wèi)，只不過這次配置是為單個組件進(jìn)行配置。

例如在我的這個項目中Welcome組件為后臺組件，現(xiàn)在要為該組件配置路由導(dǎo)航守衛(wèi)，首先要將全局配置的beforeEach更換為beforeEnter用于進(jìn)行單組件導(dǎo)航守衛(wèi)的配置

作者之前就是在登錄組件中配置的路由導(dǎo)航守衛(wèi)，結(jié)果沒有作用，在這里記錄下來，以后不犯這樣的錯誤。在組件中添加以下代碼即可：

// 定義路由導(dǎo)航守衛(wèi)
    beforeEnter(to, from, next) {
      //獲取用戶頁面token信息
      let token = window.sessionStorage.getItem('token')
      //如果token數(shù)據(jù)為null 則跳轉(zhuǎn)到指定路徑
      if (!token) return next("/login")
      next()
    }

局部導(dǎo)航守衛(wèi)的參數(shù)作用與全局配置的參數(shù)作用一致，除了將beforeEach更換為beforeEnter以外其余全部一致，在此不多做贅述。

二、用戶登錄

在這里只進(jìn)行展示前臺代碼，后臺代碼寫法每個人有每個人的風(fēng)格和寫法，在此就不做展示。

1. axios配置

為了避免項目中出現(xiàn)回調(diào)地獄的問題，在這里我導(dǎo)入了axios插件，在main.js文件中提前對axios進(jìn)行了配置

/* 導(dǎo)入axios包 */
import axios from 'axios'

/* 設(shè)定axios的請求根目錄 */
axios.defaults.baseURL = 'http://localhost:8089/'
/* 向vue對象中添加全局對象 以后發(fā)送ajax請求使用$http對象 */
Vue.prototype.$http = axios

因為在main.js文件中進(jìn)行了全局配置，因此在組件中出現(xiàn)$http代表設(shè)定的請求根目錄，在這里為http://localhost:8089/

2. 用戶登錄代碼

// 當(dāng)點擊登錄按鈕時向后臺發(fā)送數(shù)據(jù)
login() {
  this.$refs.loginFormRef.validate(async valid => {
    if(!valid) return
    const {data: result} = await this.$http.post("/user/login",this.loginForm)
    // 如果返回的參數(shù)中狀態(tài)碼不為200，則代表登錄失敗
    if(result.status !== 200) return this.$message.error("用戶登錄失敗")
    this.$message.success("用戶登錄成功")
    //登錄成功之后,將token信息保存到session中
    window.sessionStorage.setItem('token',result.data)
    //跳轉(zhuǎn)到后臺管理系統(tǒng)首頁
    this.$router.push("/welcome")
})

三、用戶退出

用戶退出時只需要將Session中的token數(shù)據(jù)刪除后再跳轉(zhuǎn)到其它頁面即可，此時路由導(dǎo)航守衛(wèi)再次生效，因此在前臺就可以實現(xiàn)，不需要連接后端。

1. 實現(xiàn)代碼

logout() {
  //1.刪除session中的數(shù)據(jù)
  window.sessionStorage.clear()
  //2.用戶訪問登錄頁面
  this.$router.push('/login')
}

總結(jié)

以上便是在Vue中配置路由導(dǎo)航守衛(wèi)后實現(xiàn)用戶登錄和退出的功能，在實現(xiàn)中分了兩種情況，分別為項目中只能登錄后才能訪問界面和即使用戶不登錄也能夠瀏覽前臺的兩種情況。對于第一種情況來說只需要進(jìn)行全局配置即可，對于第二種情況則需要在登錄后要跳轉(zhuǎn)的組件中配置單組件路由導(dǎo)航即可。

到此這篇關(guān)于Vue2.x配置路由導(dǎo)航守衛(wèi)實現(xiàn)用戶登錄和退出的文章就介紹到這了,更多相關(guān)Vue 路由守衛(wèi)登錄退出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論