【vue3.0】8.0 某东到家（八）——路由守卫实现登录校检功能、注册页面的实现

限制只有登录才能访问首页，而不登录只能打开登录界面。

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

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>

GIF.gif

同样修改一下登录页面的交互：

<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>

最后编辑于：2021.10.15 20:32:03

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,911评论 5赞 460
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 82,014评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 142,129评论 0赞 320
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,283评论 1赞 264
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,159评论 4赞 357
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,161评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,565评论 3赞 382
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,251评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,531评论 1赞 292
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,619评论 2赞 310
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,383评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,255评论 3赞 313
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,624评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,916评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,199评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,553评论 2赞 342
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,756评论 2赞 335

【vue3.0】8.0 某东到家（八）——路由守卫实现登录校检功能、注册页面的实现

限制只有登录才能访问首页，而不登录只能打开登录界面。

注册页面的实现

推荐阅读更多精彩内容