一、概述

在項(xiàng)目開發(fā)中每一次路由的切換或者頁面的刷新都需要判斷用戶是否已經(jīng)登錄，前端可以判斷，后端也會(huì)進(jìn)行判斷的，我們前端最好也進(jìn)行判斷。

vue-router提供了導(dǎo)航鉤子:全局前置導(dǎo)航鉤子 beforeEach和全局后置導(dǎo)航鉤子 afterEach，他們會(huì)在路由即將改變前和改變后進(jìn)行觸發(fā)。所以判斷用戶是否登錄需要在beforeEach導(dǎo)航鉤子中進(jìn)行判斷。

導(dǎo)航鉤子有3個(gè)參數(shù)：

  1、to:即將要進(jìn)入的目標(biāo)路由對(duì)象；

  2、from:當(dāng)前導(dǎo)航即將要離開的路由對(duì)象；

  3、next ：調(diào)用該方法后，才能進(jìn)入下一個(gè)鉤子函數(shù)（afterEach）。

        next()//直接進(jìn)to 所指路由
        next(false) //中斷當(dāng)前路由
        next('route') //跳轉(zhuǎn)指定路由
        next('error') //跳轉(zhuǎn)錯(cuò)誤路由

二、路由導(dǎo)航守衛(wèi)實(shí)現(xiàn)登錄攔截

這里用一個(gè)空白的vue項(xiàng)目來演示一下，主要有2個(gè)頁面，分別是首頁和登錄。

訪問首頁時(shí)，必須要登錄，否則跳轉(zhuǎn)到登錄頁面。

新建一個(gè)空白的vue項(xiàng)目，在src\components創(chuàng)建Login.vue

<template>
 <div>這是登錄頁面</div>
</template>

<script>
 export default {
  name: "Login"
 }
</script>

<style scoped>

</style>

修改src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'


Vue.use(Router)

const router = new Router({
 mode: 'history', //去掉url中的#
 routes: [
 {
  path: '/login',
  name: 'login',
  meta: {
  title: '登錄',
  requiresAuth: false, // false表示不需要登錄
  },
  component: Login
 },
 {
  path: '/',
  name: 'HelloWorld',
  meta: {
  title: '首頁',
  requiresAuth: true, // true表示需要登錄
  },
  component: HelloWorld
 },

 ]
})

// 路由攔截，判斷是否需要登錄
router.beforeEach((to, from, next) => {
 if (to.meta.title) {
 //判斷是否有標(biāo)題
 document.title = to.meta.title;
 }
 // console.log("title",document.title)
 // 通過requiresAuth判斷當(dāng)前路由導(dǎo)航是否需要登錄
 if (to.matched.some(record => record.meta.requiresAuth)) {
 let token = localStorage.getItem('token')
 // console.log("token",token)
 // 若需要登錄訪問，檢查是否為登錄狀態(tài)
 if (!token) {
  next({
  path: '/login',
  query: { redirect: to.fullPath }
  })
 } else {
  next()
 }
 } else {
 next() // 確保一定要調(diào)用 next()
 }
})

export default router;

說明：

在每一個(gè)路由中，加入了meta。其中requiresAuth字段，用來標(biāo)識(shí)是否需要登錄。

在router.beforeEach中，做了token判斷，為空時(shí)，跳轉(zhuǎn)到登錄頁面。

訪問首頁

http://localhost:8080

會(huì)跳轉(zhuǎn)到

http://localhost:8080/login?redirect=%2F

效果如下：

打開F12，進(jìn)入console，手動(dòng)寫入一個(gè)token

localStorage.setItem('token', '12345678910')

效果如下：

再次訪問首頁，就可以正常訪問了。

打開Application，刪除Local Storage里面的值，右鍵，點(diǎn)擊Clear即可

刷新頁面，就會(huì)跳轉(zhuǎn)到登錄頁面。

怎么樣，是不是很簡(jiǎn)單呢！

以上就是vue路由實(shí)現(xiàn)登錄攔截的詳細(xì)內(nèi)容，更多關(guān)于vue 登錄攔截的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論