【vue3.0】8.0 某東到家（八）——路由守衛實現登錄校檢功能、註冊頁面的實現

原創 bobokaka 2021-10-21 09:03

限制只有登錄才能訪問首頁，而不登錄只能打開登錄界面。

這就用到路由守衛功能。
修改路由配置文件``：

import {
  createRouter,
  createWebHistory
} from 'vue-router'

const routes = [{
  path: '/',
  name: 'Home',
  component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue')

}, {
  path: '/login',
  name: 'Login',
  component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue')

}]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
// beforeEach:每次做路由跳轉之前都會執行這個操作。
router.beforeEach((to, from, next) => {
  // to and from are Route Object,
  // to:跳轉的時候想要跳轉的頁面的信息
  // from :指從哪裏跳過來的信息
  // next() must be called to resolve the hook}
  // 中間件繼續執行的方法

  const isLogin =  const isLogin = false
  console.log(to, from)
  /** 判斷是否登錄 */
  // 必須雙循環，才能防止死循環
  if (isLogin || to.name === 'Login') {
    next()
  } else {
    // 如果沒有登錄，就跳到登錄頁面
    next({
      name: 'Login'
    })
  }
})
export default router

這樣，無論什麼子路徑都會跳轉到登錄頁面。
修改是否登錄爲本地存儲：

......
  const isLogin = localStorage.isLogin // 從本地存儲中取isLogin
......

修改src\views\login\Login.vue:

<template>
  <div class="wrapper">
    <img class="wrapper__img" src="/i18n/9_16/img/user.png" />
    <div class="wrapper__input">
      <input class="wrapper__input__content" placeholder="請輸入手機號碼" />
    </div>
    <div class="wrapper__input">
      <input
        type="password"
        class="wrapper__input__content"
        placeholder="請輸入密碼"
      />
    </div>
    <div class="wrapper__login-button" @click="handleLogin">登陸</div>
    <div class="wrapper__login__item">
      <div class="wrapper__login__item__link">立即註冊</div>
      <p class="wrapper__login__item__cut">|</p>
      <div class="wrapper__login__item__password">忘記密碼</div>
    </div>
  </div>
</template>

<script>
// 路由跳轉方法
import { useRouter } from 'vue-router'
export default {
  name: 'Login',
  setup () {
    // 獲取路由實例
    const router = useRouter()
    // 登錄按鈕
    const handleLogin = () => {
      localStorage.isLogin = true
      // 登陸之後重新做一次頁面跳轉，再訪問下一個頁面
      router.push({ name: 'Home' })
    }
    return { handleLogin }
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/viriables';
.wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  &__img {
    display: block;
    margin: 0 auto 0.4rem auto;
    width: 0.66rem;
    height: 0.66rem;
  }
  &__input {
    // box-sizing: border-box;//內部間距
    height: 0.48rem;
    margin: 0 0.4rem 0.16rem 0.4rem;
    background: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.06rem;
    &__content {
      line-height: 0.48rem;
      background: none;
      border: none;
      outline: none;
      width: 100%;
      font-size: 0.16rem;
      color: $centent-notice-fontcolor;
      &::placeholder {
        color: $centent-notice-fontcolor;
      }
    }
  }
  &__login-button {
    line-height: 0.48rem;
    margin: 0.32rem 0.4rem 0.16rem 0.4rem;
    background: #0091ff;
    color: #fff;
    box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
    border-radius: 0.04rem;
    font-size: 0.16rem;
    text-align: center;
  }
  &__login__item {
    text-align: center;
    &__link {
      display: inline-block;
      margin: auto 0.05rem auto 0.05rem;
      text-align: center;
      font-size: 0.14rem;
      color: $centent-notice-fontcolor;
    }
    &__cut {
      display: inline-block;
      text-align: center;
      font-size: 0.14rem;
      margin: auto 0.05rem auto 0.05rem;
    }
    &__password {
      display: inline-block;
      text-align: center;
      font-size: 0.14rem;
      margin: auto 0.05rem auto 0.05rem;
      color: $centent-notice-fontcolor;
    }
  }
}
</style>

實現一個簡單的登錄邏輯。但是如果已經登錄，那麼就不應該讓用戶繼續訪問到登錄頁面：
修改src\router\index.js:

import {
  createRouter,
  createWebHistory
} from 'vue-router'

const routes = [{
  path: '/',
  name: 'Home',
  component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue')

}, {
  path: '/login',
  name: 'Login',
  component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue'),
  beforeEnter: (to, from, next) => {
    // 只有訪問Login頁面之前纔會執行次函數
    const isLogin = localStorage.isLogin // 從本地存儲中取isLogin
    if (isLogin) {
      // 如果登錄，就跳到首頁頁面
      next({
        name: 'Home'
      })
    } else {
      // 否則跳轉到登錄頁面
      next()
    }
  }
}]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
// beforeEach:全局，每次做路由跳轉之前都會執行這個操作。
router.beforeEach((to, from, next) => {
  // to and from are Route Object,
  // to:跳轉的時候想要跳轉的頁面的信息
  // from :指從哪裏跳過來的信息
  // next() must be called to resolve the hook}
  // 中間件繼續執行的方法

  const isLogin = localStorage.isLogin // 從本地存儲中取isLogin
  console.log(to, from)
  /** 判斷是否登錄 */
  // 必須雙循環，才能防止死循環
  if (isLogin || to.name === 'Login') {
    next()
  } else {
    // 如果沒有登錄，就跳到登錄頁面
    next({
      name: 'Login'
    })
  }
})
export default router

當然，可以優化一下寫法：

const routes = [{
  path: '/',
  name: 'Home',
  component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue')

}, {
  path: '/login',
  name: 'Login',
  component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue'),
  beforeEnter: (to, from, next) => {
    // 只有訪問Login頁面之前纔會執行次函數
    const {
      isLogin
    } = localStorage // 從本地存儲中取isLogin
    // 如果登錄，就跳到首頁頁面;否則跳轉到登錄頁面
    isLogin
      ? next({
        name: 'Home'
      })
      : next()
  }
}]
......
// beforeEach:全局，每次做路由跳轉之前都會執行這個操作。
router.beforeEach((to, from, next) => {
  // to and from are Route Object,
  // to:跳轉的時候想要跳轉的頁面的信息
  // from :指從哪裏跳過來的信息
  // next() must be called to resolve the hook}
  // 中間件繼續執行的方法

  // 從本地存儲中取isLogin
  const {
    isLogin
  } = localStorage

  console.log(to, from);
  /** 判斷是否登錄 */
  // 必須雙循環，才能防止死循環
  // 如果沒有登錄，就跳到登錄頁面

  (isLogin || to.name === 'Login') ? next() : next({
    name: 'Login'
  })
})

註冊頁面的實現

註冊頁面和登錄頁面一致。
把登錄頁面複製到註冊頁面：
新建src\views\register\Register.vue:

<template>
  <div class="wrapper">
    <img class="wrapper__img" src="/i18n/9_16/img/user.png" />
    <div class="wrapper__input">
      <input class="wrapper__input__content" placeholder="請輸入手機號碼" />
    </div>
    <div class="wrapper__input">
      <input
        type="password"
        class="wrapper__input__content"
        placeholder="請輸入密碼"
      />
    </div>
    <div class="wrapper__login-button" @click="handleLogin">登陸</div>
    <div class="wrapper__login__item">
      <div class="wrapper__login__item__link">立即註冊</div>
      <p class="wrapper__login__item__cut">|</p>
      <div class="wrapper__login__item__password">忘記密碼</div>
    </div>
  </div>
</template>

<script>
// 路由跳轉方法
import { useRouter } from 'vue-router'
export default {
  name: 'Register',
  setup () {
    // 獲取路由實例
    const router = useRouter()
    // 登錄按鈕
    const handleLogin = () => {
      localStorage.isLogin = true
      // 登陸之後重新做一次頁面跳轉，再訪問下一個頁面
      router.push({ name: 'Home' })
    }
    return { handleLogin }
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/viriables';
.wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  &__img {
    display: block;
    margin: 0 auto 0.4rem auto;
    width: 0.66rem;
    height: 0.66rem;
  }
  &__input {
    // box-sizing: border-box;//內部間距
    height: 0.48rem;
    margin: 0 0.4rem 0.16rem 0.4rem;
    background: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.06rem;
    &__content {
      line-height: 0.48rem;
      background: none;
      border: none;
      outline: none;
      width: 100%;
      font-size: 0.16rem;
      color: $centent-notice-fontcolor;
      &::placeholder {
        color: $centent-notice-fontcolor;
      }
    }
  }
  &__login-button {
    line-height: 0.48rem;
    margin: 0.32rem 0.4rem 0.16rem 0.4rem;
    background: #0091ff;
    color: #fff;
    box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
    border-radius: 0.04rem;
    font-size: 0.16rem;
    text-align: center;
  }
  &__login__item {
    text-align: center;
    &__link {
      display: inline-block;
      margin: auto 0.05rem auto 0.05rem;
      text-align: center;
      font-size: 0.14rem;
      color: $centent-notice-fontcolor;
    }
    &__cut {
      display: inline-block;
      text-align: center;
      font-size: 0.14rem;
      margin: auto 0.05rem auto 0.05rem;
    }
    &__password {
      display: inline-block;
      text-align: center;
      font-size: 0.14rem;
      margin: auto 0.05rem auto 0.05rem;
      color: $centent-notice-fontcolor;
    }
  }
}
</style>

修改路由信息src\router\index.js：

import {
  createRouter,
  createWebHistory
} from 'vue-router'

const routes = [{
  path: '/',
  name: 'Home',
  component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue')

}, {
  path: '/login',
  name: 'Login',
  component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue'),
  beforeEnter: (to, from, next) => {
    // 只有訪問Login頁面之前纔會執行次函數
    const {
      isLogin
    } = localStorage // 從本地存儲中取isLogin
    // 如果登錄，就跳到首頁頁面;否則跳轉到登錄頁面
    isLogin
      ? next({
        name: 'Home'
      })
      : next()
  }
},
{
  path: '/register',
  name: 'Register',
  component: () => import(/* webpackChunkName: "register" */ '../views/register/Register.vue'),
  beforeEnter: (to, from, next) => {
    const {
      isLogin
    } = localStorage
    isLogin
      ? next({
        name: 'Home'
      })
      : next()
  }
}
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
// beforeEach:全局，每次做路由跳轉之前都會執行這個操作。
router.beforeEach((to, from, next) => {
  // to and from are Route Object,
  // to:跳轉的時候想要跳轉的頁面的信息
  // from :指從哪裏跳過來的信息
  // next() must be called to resolve the hook}
  // 中間件繼續執行的方法

  // 從本地存儲中取isLogin
  const {
    isLogin
  } = localStorage

  console.log(to, from)
  /** 判斷是否登錄 */
  // 必須雙循環，才能防止死循環
  // 如果沒有登錄，就跳到登錄頁面
  const {
    name
  } = to
  const
    isLoginOrRegister = (name === 'Login' || name === 'Register');
  (isLogin || isLoginOrRegister) ? next() : next({
    name: 'Login'
  })
})
export default router

接下來修改src\views\register\Register.vue:

<template>
  <div class="wrapper">
    <img class="wrapper__img" src="/i18n/9_16/img/user.png" />
    <div class="wrapper__input">
      <input class="wrapper__input__content" placeholder="請輸入手機號碼" />
    </div>
    <div class="wrapper__input">
      <input
        type="password"
        class="wrapper__input__content"
        placeholder="請輸入密碼"
      />
    </div>
    <div class="wrapper__input">
      <input
        type="password"
        class="wrapper__input__content"
        placeholder="請再次輸入密碼"
      />
    </div>
    <div class="wrapper__register-button">註冊</div>
    <div class="wrapper__register__item">
      <div class="wrapper__register__item__link" @click="handleLoginClick">
        已有賬號去登陸
      </div>
    </div>
  </div>
</template>

<script>
// 路由跳轉方法
import { useRouter } from 'vue-router'
export default {
  name: 'Register',
  setup () {
    // 獲取路由實例
    const router = useRouter()
    const handleLoginClick = () => {
      router.push({ name: 'Login' })
    }
    return { handleLoginClick }
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/viriables';
.wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  &__img {
    display: block;
    margin: 0 auto 0.4rem auto;
    width: 0.66rem;
    height: 0.66rem;
  }
  &__input {
    // box-sizing: border-box;//內部間距
    height: 0.48rem;
    margin: 0 0.4rem 0.16rem 0.4rem;
    background: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.06rem;
    &__content {
      line-height: 0.48rem;
      background: none;
      border: none;
      outline: none;
      width: 100%;
      font-size: 0.16rem;
      color: $centent-notice-fontcolor;
      &::placeholder {
        color: $centent-notice-fontcolor;
      }
    }
  }
  &__register-button {
    line-height: 0.48rem;
    margin: 0.32rem 0.4rem 0.16rem 0.4rem;
    background: #0091ff;
    color: #fff;
    box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
    border-radius: 0.04rem;
    font-size: 0.16rem;
    text-align: center;
  }
  &__register__item {
    text-align: center;
    &__link {
      display: inline-block;
      margin: auto 0.05rem auto 0.05rem;
      text-align: center;
      font-size: 0.14rem;
      color: $centent-notice-fontcolor;
    }
  }
}
</style>

同樣修改一下登錄頁面的交互：

<template>
  <div class="wrapper">
    <img class="wrapper__img" src="/i18n/9_16/img/user.png" />
    <div class="wrapper__input">
      <input class="wrapper__input__content" placeholder="請輸入手機號碼" />
    </div>
    <div class="wrapper__input">
      <input
        type="password"
        class="wrapper__input__content"
        placeholder="請輸入密碼"
      />
    </div>
    <div class="wrapper__login-button" @click="handleLogin">登陸</div>
    <div class="wrapper__login__item">
      <div class="wrapper__login__item__link" @click="handleRegisterClick">
        立即註冊
      </div>
      <p class="wrapper__login__item__cut">|</p>
      <div class="wrapper__login__item__password">忘記密碼</div>
    </div>
  </div>
</template>

<script>
// 路由跳轉方法
import { useRouter } from 'vue-router'
export default {
  name: 'Login',
  setup () {
    // 獲取路由實例
    const router = useRouter()
    // 登錄按鈕
    const handleLogin = () => {
      localStorage.isLogin = true
      // 登陸之後重新做一次頁面跳轉，再訪問下一個頁面
      router.push({ name: 'Home' })
    }

    const handleRegisterClick = () => {
      router.push({ name: 'Register' })
    }
    return { handleLogin, handleRegisterClick }
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/viriables';
.wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  &__img {
    display: block;
    margin: 0 auto 0.4rem auto;
    width: 0.66rem;
    height: 0.66rem;
  }
  &__input {
    // box-sizing: border-box;//內部間距
    height: 0.48rem;
    margin: 0 0.4rem 0.16rem 0.4rem;
    background: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.06rem;
    &__content {
      line-height: 0.48rem;
      background: none;
      border: none;
      outline: none;
      width: 100%;
      font-size: 0.16rem;
      color: $centent-notice-fontcolor;
      &::placeholder {
        color: $centent-notice-fontcolor;
      }
    }
  }
  &__login-button {
    line-height: 0.48rem;
    margin: 0.32rem 0.4rem 0.16rem 0.4rem;
    background: #0091ff;
    color: #fff;
    box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
    border-radius: 0.04rem;
    font-size: 0.16rem;
    text-align: center;
  }
  &__login__item {
    text-align: center;
    &__link {
      display: inline-block;
      margin: auto 0.05rem auto 0.05rem;
      text-align: center;
      font-size: 0.14rem;
      color: $centent-notice-fontcolor;
    }
    &__cut {
      display: inline-block;
      text-align: center;
      font-size: 0.14rem;
      margin: auto 0.05rem auto 0.05rem;
    }
    &__password {
      display: inline-block;
      text-align: center;
      font-size: 0.14rem;
      margin: auto 0.05rem auto 0.05rem;
      color: $centent-notice-fontcolor;
    }
  }
}
</style>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

鼠標控制軟件有可能和虛擬機軟件產生衝突

  最近Virtualbox虛擬機經常卡頓、鼠標無法點擊，給工作帶來很多麻煩。有一次身子在開會的時候直接卡死，特別尷尬。。 一開始以爲是輸入法或者操作系統補丁的問題，但調整後並不能解決。 更改虛擬機的各種設置，全部無效。 之後升級了Virt

氫氦 2024-06-13 14:37:05

比特幣區塊檢查

比特幣採用Pow共識機制，即不斷調整Nonce值，對區塊頭做雙重SHA256哈希運算，使得結果滿足給定數量前導0的哈希值的過程。其中前導0的個數，取決於挖礦難度，前導0的個數越多，挖礦難度越大。 1 塊兒產生時的檢查 首先，生成鑄幣交易，並

weiwei22844 2024-06-13 14:36:55

自定義MyBatis插件

插件原理回顧 在前面，我們通過 MyBatis插件機制介紹與原理 分析了 MyBatis 插件的基本原理，但是可能還只是理論上的分析，沒有實戰的鍛鍊可能理解的還是不夠透徹。接下來，我們通過自定義插件實例來進一步深度理解 MyBatis 插件

燈塔下的守望者 2024-06-13 14:36:45

高性能版本的零內存分配LikeString函數（ZeroMemAllocLikeOperator）

繼上一篇文章在.NET Core，除了VB的LikeString，還有其它方法嗎？(四種LikeString實現分享)分享了四種實現方式，筆者對這四種實現方式，不管是執行性能還是內存分配性能上，都不太滿意。 那麼是否有好的實現方法呢？答案是

VAllen 2024-06-13 14:35:54

【java基礎】java線程的四種創建方式

1.繼承Thread類   2.實現Runnable接口  因爲Runnable接口就是支持函數式編程的接口，可以這麼玩   3.實現Callable接口，用FutureTask<T>獲取返回值。FutureTask還是繼承的Runn

金大鑫要堅持 2024-06-13 14:32:24

【java基礎】線程池的狀態流轉

前言： 首先要知道什麼是線程池？ 池化：數據庫連接池， 線程池，字符串常量池 線程是用來執行任務的， 如果不用線程池，那麼線程每次使用前創建，使用後釋放，資源利用率低。所以說用線程池提高了線程對象利用率。 所以可以用線程池完成，先創建好那麼

金大鑫要堅持 2024-06-13 14:32:24

微服務實踐之使用 kube-vip 搭建高可用 Kubernetes 集羣

實驗環境 原理 生成kube-vip靜態pod配置清單 export VIP=192.168.215.200 # 我的vip是192.168.215.200 export INTERFACE=ens33 #可以用 ip a 查看接口名稱

hiningrise 2024-06-13 14:30:24

Keyboard Maestro 常用的 Actions 記錄

前言 使用 Keyboard Maestro 做自動化管理是，Actions太多了，總是記不住，這裏特意記錄一下 正文 觸發鍵盤按鍵 Type a Keystroke Categories: Interface Control Action

水車 2024-06-13 14:27:44

一款.NET開源、功能強大、跨平臺的繪圖庫 - OxyPlot

前言 今天大姚給大家分享一款.NET開源（MIT License）、免費、跨平臺、功能強大的繪圖庫，支持多平臺使用（包括：WPF、UWP、WinForm、Silverlight、Xamarin.iOS、Xamarin.Android、Xam

追逐時光 2024-06-13 14:27:24

一個開源且全面的C#算法實戰教程

前言 算法在計算機科學和程序設計中扮演着至關重要的角色，如在解決問題、優化效率、決策優化、實現計算機程序、提高可靠性以及促進科學融合等方面具有廣泛而深遠的影響。今天大姚給大家分享一個開源、免費、全面的C#算法實戰教程：TheAlgorith

追逐時光 2024-06-13 14:27:24

重新搞黑魂1的mod

筆記本沒顯卡. 玩黑魂1, 不是重置版還可以. 裝上受死版之後, 需要打dsfix 的補丁. 設置: DSfix.ini # internal rendering resolution of the game # higher values

張博的博客 2024-06-13 14:25:14

C語言--右移 左移

C語言--右移 左移 右移，高位補符號位，低位移除（正整數符號位爲0，負整數符號位爲1） 16 >> 2 等價爲 16 /（ 2 * 2） 左移，高位移除，低位補零，最高位爲1時，表示負數。16 << 2 等價爲 16 *（ 2 * 2）

張博的博客 2024-06-13 14:25:14

Redis相關總結

一、緩存雪崩、緩存穿透 現象：緩存雪崩：大量緩存同時過期、緩存中間件宕機 緩存穿透：訪問不存在key、緩存過期解決：緩存雪崩：設置不同過期時間 緩存穿透：不存在key也存入緩存、使用布隆過濾器、使用分佈式

DayVK 2024-06-13 14:24:13

HbuilderX，找不到rollup/rollup-win32-x64-msvc

在使用HbuilderX,使用vue3開發uniapp時，我運行app，報錯，rollup組件找不到了。這個rollup是一個編譯js的工具，win32-x64的意思是採用windows版本64位的運行版本，msvc是說，需要windows

HelloLLLLL 2024-06-13 14:22:53

sc-token傳參方式20240613

2018 2024-06-13 14:20:13