前言

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

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

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

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

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

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

參數(shù)解釋：

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

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

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

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

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

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

// 定義路由導(dǎo)航守衛(wèi)
    beforeEnter(to, from, next) {
      //獲取用戶頁(yè)面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)行展示前臺(tái)代碼，后臺(tái)代碼寫法每個(gè)人有每個(gè)人的風(fēng)格和寫法，在此就不做展示。

1. axios配置

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

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

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

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

2. 用戶登錄代碼

// 當(dāng)點(diǎn)擊登錄按鈕時(shí)向后臺(tái)發(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ái)管理系統(tǒng)首頁(yè)
    this.$router.push("/welcome")
})

三、用戶退出

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

1. 實(shí)現(xiàn)代碼

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

總結(jié)

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

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

最新評(píng)論