vue之全域性守衛

2022-05-07 15:00:10 字數 1094 閱讀 5066

vue的路由守衛是什麼東西呢?

第一次接觸很懵逼,知道自己遇到了這樣乙個需求,

在頁面之間進行路由跳轉時,需要進行乙個判斷,如果下乙個頁面是需要登入後才能進入的頁面,那麼就需要在點選進入該頁面的時候進行守衛的判斷,判斷使用者是否登入,如果登入過了。就直接進入需要進入的頁面,如果沒有登入過,則進入登入頁面。

那麼問題來了,怎麼知道登入過還是沒有登入過呢?

在點選登入的時候,會請求後台的api,這時,後台會返回乙個token欄位。我們需要將該字段儲存到storage或者cookie中。然後在路由守衛中加入讀取出來判斷他是否存在久可以判斷是否登入過。

一般我們選擇存入storage中,因為cookie會在每次請求時,伴隨傳送。效能上沒有storage好些。

下面是乙個例子:

router.js

import vue from 'vue';

import router from 'vue-router';

import loginpage from '@/pages/login';

import homepage from '@/pages/home';

import goodslistpage from '@/pages/good-list';

import goodsdetailpage from '@/pages/good-detail';

import cartpage from '@/pages/cart';

import profilepage from '@/pages/profile';

vue.use(router)

const router = new

router(,,,

,,,,

,]}); //

全域性路由守衛

router.beforeeach((to, from, next) =>)

}}

//已登入狀態;當路由到login時,如果已經登入過,則跳轉至home

if (to.name === 'login') );

}} next();

});

export

default router;

VUE全域性路由守衛

大專案都會採用,因為需要驗證使用者是否登入等問題 在使用vue router時會進行router跳轉,跳轉時,我們能對路由進行暫時攔截,進行一系列條件判斷 比如使用者登入情況,是不是vip使用者等 在根據判斷進行導航 beforeeach 在 router index 下進行配置 const rou...

vue 全域性導航守衛

現在有個需求是,路由間進行切換時,順便把頁面的標題也修改了 比如說當前a路由,那標題是a 切換到b路由,那標題變成b,以此類推。很多人的做法是這樣的,在每個路由的created 寫 直接document.title a b c 不就可以了嗎?那這樣是不是太麻煩了,每個路由都要去加這麼個 順便在普及下...

Vue Router 全域性守衛

上節說到動態路由,動態路由只需要在配置路由path的時候使用 id來繫結乙個動態引數即可 const router new vuerouter 重定向 當你輸入乙個localhost 8080直接給你跳轉到son這個元件。使用redirect跳轉指定元件,son元件中的alias是別名的意思訪問 s...