Vue项目 - 登录和注册页面处理

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

登录

今天要实现的效果图

代码实现：

<template>
    <div class="wrapper">
        <img class="wrapper__img"
            src="http://rhb782ep7.hn-bkt.clouddn.com/%E7%BC%96%E7%BB%84.png?e=1662370220&token=6gAXP7vKAVfOY_fEu7FKGWQii8w9bsTQkmKWkfh-:r0tLZ8HpYVP89goAAmW8gQyZeKo=" />
        <div class="wrapper__input">
            <input class="wrapper__input__content" placeholder="请输入手机号" />
        </div>
        <div class="wrapper__input">
            <input class="wrapper__input__content" placeholder="请输入密码" type="password" />
        </div>
        <div class="wrapper__login-button">登陆</div>
        <div class="wrapper__login-link">立即注册</div>
    </div>
</template>
<script>
export default {
    name: 'Login'
}
</script>
<style lang="scss" scoped>
.wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);

    &__img {
        display: block;
        margin: 0 auto .4rem auto;
        width: .66rem;
        height: .66rem;
    }

    &__input {
        height: .48rem;
        margin: 0 .4rem .16rem .4rem;
        padding: 0 .16rem;
        background: #F9F9F9;
        border: 1px solid rgba(0, 0, 0, 0.10);
        border-radius: .06rem;

        &__content {
            line-height: .48rem;
            border: none;
            outline: none;
            width: 100%;
            background: none;
            font-size: .16rem;
            color: #777;

            &::placeholder {
                color: #777;
            }
        }
    }

    &__login-button {
        margin: .32rem .4rem .16rem .4rem;
        line-height: .48rem;
        font-size: .16rem;
        background: #0091FF;
        box-shadow: 0 .04rem .08rem 0 rgba(0, 145, 255, 0.32);
        border-radius: .04rem;
        color: #fff;
        text-align: center;
    }

    &__login-link {
        font-size: .14rem;
        color: #777;
        text-align: center;
    }

}
</style>

新建路由

import Login from '../views/login/Login.vue'

const routes = [
 ...
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
  ....
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

根据路由动态显示页面

<template>
    <router-view />
</template>

<script>
export default {
    name: 'App',
}
</script>

必须先登录之后才能进入首页的逻辑控制

// 控制路由跳转的逻辑，必须要先登录之后才能进入首页
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.isLogin //使用localStorage存储isLogin来控制是否登录
  if (isLogin || to.name === 'Login') {
    next()
  } else {
    next({ name: 'Login' })
  }
})

给登录按钮点击事件

 <div class="wrapper__login-button" @click="handleLogin">
            登陆
        </div>

点击事件处理

<script>
import { useRouter } from 'vue-router';
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Login',
    setup() {
        const router = useRouter();
        const handleLogin = () => {
            // 假设点击登录直接就登录了
            localStorage.isLogin = true
            router.push({ name: 'home' });
        }
        return { handleLogin }
    }
}
</script>

localStorage里面的变量值变成了true

如果已经在登录了，再次访问的时候直接进入首页

  {
    path: '/login',
    name: 'Login',
    component: Login,
    beforeEnter: (to, from, next) => {
      // 如果已经登录了，直接进入home页面
      const isLogin = localStorage.isLogin;
      if (isLogin) {
        next({ name: ' home' })
      } else {
        next()
      }
    }

注册

因为登录和注册的页面差不多，代码我直接就不上了，直接copy一下登录页面修改一下就好