快捷導(dǎo)航

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

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

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

簡(jiǎn)介

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

簡(jiǎn)單示例

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

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

在登錄組件的路由配置對(duì)象中添加 props: route => ({ redirect: route.query.redirect })
在登錄組件中使用 props 接收參數(shù) props: ['redirect'] ，同時(shí)在登錄事件完成時(shí)判定路由參數(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ù)，如首頁(yè)的登錄鏈接：

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

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

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)限驗(yàn)證相關(guān)邏輯，如 to.matched.some(record => record.requiresAuth)
        ) {
            // 該路由不要求用戶登錄，繼續(xù)完成導(dǎo)航
            next();
        } else {
            // 用戶未登錄，且目標(biāo)路由不在白名單中，重定向至登錄頁(yè)
            next({ name: 'Login', query: { redirect: to.fullPath } });
        }
    else { ... // 已登錄時(shí)的路由守衛(wèi)判定 }
    }
}

補(bǔ)充用戶退出時(shí)的處理

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

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

退出相關(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)帶上當(dāng)前路徑，否則重新登錄后只能到首頁(yè)
    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)入了一個(gè) routePaths 對(duì)象。由于搜索頁(yè)等組件是帶有 params 參數(shù)的，若想要判定當(dāng)前路由是否屬于白名單，需要使用路由配置對(duì)象中的完整 path 字符串，比如搜索頁(yè)是 /search/:keyword?，那么白名單數(shù)組和 routePaths 對(duì)象里都需要使用這個(gè)字符串。此處為了匹配的方便，使用路由組件的 name 屬性作為 routePaths 的 key。示例：

routePaths.js

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

進(jìn)階

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

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

首先，定義路由的配置對(duì)象時(shí)，將登錄組件的路由 props 改為：

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

其次，登錄成功時(shí)，給路由跳轉(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 實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前相要訪問(wèn)的頁(yè)面的文章就介紹到這了,更多相關(guān)Vue Router 登錄后跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: