快捷導(dǎo)航

Vue?Router?實現(xiàn)登錄后跳轉(zhuǎn)到之前想要訪問的頁面

更新時間：2022年12月14日 10:13:54 作者：CJc_3103

這篇文章主要介紹了Vue?Router?實現(xiàn)登錄后跳轉(zhuǎn)到之前相要訪問的頁面,本文僅演示路由跳轉(zhuǎn)和導(dǎo)航守衛(wèi)相關(guān)代碼的實現(xiàn)，不包含具體的權(quán)限驗證和登錄請求，需要的朋友可以參考下

簡介

該功能主要用于判定用戶權(quán)限，在用戶無權(quán)限時重定向至登錄頁，并在用戶完成登錄后，再定向至用戶之前想要訪問的路由；或者用戶在任意路由點擊登錄時，登錄成功后返回當(dāng)前路由。是一個很常規(guī)的小功能。

簡單示例

本文僅演示路由跳轉(zhuǎn)和導(dǎo)航守衛(wèi)相關(guān)代碼的實現(xiàn)，不包含具體的權(quán)限驗證和登錄請求。

實現(xiàn)該功能主要分為四步：

在登錄組件的路由配置對象中添加 props: route => ({ redirect: route.query.redirect })
在登錄組件中使用 props 接收參數(shù) props: ['redirect'] ，同時在登錄事件完成時判定路由參數(shù)并跳轉(zhuǎn)：

props: ['redirect'],
...
handleLogin() {
  this.$store.dispatch('LOGIN', { somePramsHere })
    .then(() => {
      this.$router.push(
        this.redirect ? { path: this.redirect } : { name: 'Home' }
      );
    })
    .catch((err) => {
      // 登錄失敗
    });
},

在其他路由的登錄入口添加相應(yīng)的 rediect 參數(shù)，如首頁的登錄鏈接：

<router-link 
  :to="{
         name: 'Login',
         query: { redirect: $route.fullPath },
       }"
 ><span class="login">登錄</span></router-link>

在路由守衛(wèi)中添加相應(yīng)的判定邏輯，當(dāng)用戶不具備權(quán)限時，重定向至登錄頁：

import router from './index';
import store from '@/store/index';
import whiteList from './whiteList';
 
router.beforeEach((to, from, next) => {
    if (!store.state.token) {
        // 未登錄
        if (
            to.matched.length > 0 &&
            to.matched.some((record) => whiteList.includes(record.path))
            // 此處還可添加用戶權(quán)限驗證相關(guān)邏輯，如 to.matched.some(record => record.requiresAuth)
        ) {
            // 該路由不要求用戶登錄，繼續(xù)完成導(dǎo)航
            next();
        } else {
            // 用戶未登錄，且目標(biāo)路由不在白名單中，重定向至登錄頁
            next({ name: 'Login', query: { redirect: to.fullPath } });
        }
    else { ... // 已登錄時的路由守衛(wèi)判定 }
    }
}

補充用戶退出時的處理

由于導(dǎo)航守衛(wèi)只有在路由變化時才會被觸發(fā)，而使用 $router.replace() 模擬刷新并不會觸發(fā)導(dǎo)航守衛(wèi)（push() 也不行），因為 VueRouter 不允許進入相同的路由，這是其內(nèi)部機制，我們無法在外部干涉。

因此，只能在用戶退出成功時，手動加入與導(dǎo)航守衛(wèi)相同的判定邏輯，若在白名單之內(nèi)或擁有相應(yīng)的路由權(quán)限，則留在當(dāng)前路由；若不符合條件，則重定向至登錄頁：

退出相關(guān)組件

import whiteList from '@/store/whiteList';
import routePaths from '@/store/routePaths';
 
...
handleLogoutRedirect() {
  let location = {};
  if (
    !whiteList.includes(this.routePath) &&
    !whiteList.includes(routePaths[this.routeName])
  ) {
    location = { name: 'Login', query: { redirect: this.routePath } }; // 注意這里，需要手動帶上當(dāng)前路徑，否則重新登錄后只能到首頁
    this.$router.push(location);
  }
  // 當(dāng)前路由在白名單之內(nèi)的，不需要跳轉(zhuǎn)，留在當(dāng)前路由即可
},
handleLogout() {
  this.$store
    .dispatch('LOGOUT')
    .then(() => {
      this.handleLogoutRedirect();
    })
    .catch((err) => err);
},
...

注意，我在頂部導(dǎo)入了一個 routePaths 對象。由于搜索頁等組件是帶有 params 參數(shù)的，若想要判定當(dāng)前路由是否屬于白名單，需要使用路由配置對象中的完整 path 字符串，比如搜索頁是 /search/:keyword?，那么白名單數(shù)組和 routePaths 對象里都需要使用這個字符串。此處為了匹配的方便，使用路由組件的 name 屬性作為 routePaths 的 key。示例：

routePaths.js

// 其他路由若是 path 不帶 params 參數(shù)的，可以不用配置，像上述代碼那樣分開判定即可
const routePaths = {
    Search: '/search/:keyword?',
}
export default routePaths;

進階

在任意路由點擊登錄，將當(dāng)前路由和路由參數(shù)都帶給登錄組件，登錄成功后返回之前的路由并攜帶全部路由參數(shù)。

此處的導(dǎo)航守衛(wèi)、以及帶有登錄鏈接或跳轉(zhuǎn)至登錄頁功能的組件代碼無需改動，只需要修改路由配置對象和登錄組件。

首先，定義路由的配置對象時，將登錄組件的路由 props 改為：

props: route => {
  let params = route.params, query = route.query; // 這里不能解構(gòu) route 對象，否則拿不到值
  const redirect = query.redirect;
  Reflect.deleteProperty(query, 'redirect'); // 原本的 query 對象不帶 redirect 屬性，因此需要刪除
  return { redirect, params, query }
},

其次，登錄成功時，給路由跳轉(zhuǎn)添加 prams 和 query 參數(shù)

props: ['redirect', 'params', 'query'],
...
handleLogin() {
  this.$store
    .dispatch('LOGIN', { phone: this.phone, password: this.password })
    .then((data) => {
      this.$router.push(
        this.redirect
          ? { path: this.redirect, params: this.params, query: this.query }
          : { name: 'Home' }
      );
    })
    .catch((err) => {
      console.log('登錄失?。?, err);
    });
},

到此這篇關(guān)于Vue Router 實現(xiàn)登錄后跳轉(zhuǎn)到之前相要訪問的頁面的文章就介紹到這了,更多相關(guān)Vue Router 登錄后跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: