**课程名称：前端工程师
课程章节： 第三章 项目登录&注册页开发
主讲老师：Dell

课程内容： 第三章 登录&注册页开发

3-1登陆页面布局开发

1.实现元素垂直居中效果

transform: translateY(-50%) 实现元素垂直居中效果，代码如下：

.wrapper {
  //  垂直居中的写法
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  //  transform: translateY(-50%) 实现元素垂直居中效果
  transform: translateY(-50%);

2、::placehover属于伪元素

可以选择一个表单元素的提示文字，设置它的样式，示例：

    <!-- ::placehover属于伪元素，可以选择一个表单元素的提示文字，设置它的样式 -->
    <div class="wrapper__input">
      <input
        class="wrapper__input__content"
        placeholder="请输入用户名"
        v-model="username"
      />
    </div>

3、登录页面及路由配置

路由 router：

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

配置路由：

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/home/Home')
  }, {
    path: '/cartList',
    name: 'CartList',
    // 同步路由
    // component: Home
    // 动态路由
    component: () => import(/* webpackChunkName: "cartList" */ '../views/cartList/CartList')
  }

3-2 路由守卫实现基础登陆校验功能

useRouter()获取路由器

1.页面跳转及局部组件路由限定：

 <div class="wrapper__longin-link" @click="handleRegisterClick">

// 引入useRouter
import { useRouter } from "vue-router"

// 处理注册跳转
const uesRegisterEffect = () => {
  const router = useRouter()
  const handleRegisterClick = () => {
  // 路由跳转功能，跳转到name是Register这个router页面
   router.push({ name: "Register" });
  }
  return { handleRegisterClick }
 }

2.路由全局校验

• 路由守卫，全局检验功能，beforeEac：每次路由即将改变之前，路由在每次切换时，会执行
• 判断是否登陆 或者 to.name === ‘Login’，判断是否进入的login页，如果是，就执行当前Login页面，如果不是，跳转到login登陆页面
• 简化后三元运算：
  const isLoginOrRegister = ( name === ‘Login’|| name ===‘Register’ );
  (isLogin || isLoginOrRegister ) ? next() : next({ name: ‘Login’ })
• Login页面登陆成功后跳转到Home页面，但有一个漏洞：地址栏输入login地址时还是会跳转到login登陆页面。实际上账号登陆成功进入首页后，不应该还可以返回登陆页面的，这是不符合逻辑的， 解决方法：
  beforeEnter(to, from, next) 访问login页面之前才会执行的函数
  breforeEach() 路由切换的时候都会执行的函数

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
 // 路由守卫，全局检验功能，beforeEac：每次路由即将改变之前，路由在每次切换时，会执行
router.beforeEach((to, form, next) => {
  // 获取本地存储的登陆信息，登陆状态
  // 解析赋值
  const { isLogin } = localStorage;
  const { name} = to;
  // 判断是否登陆 或者 to.name === 'Login' 判断是否进入的login页，如果是，就执行当前Login页面，如果不是，跳转到login登陆页面
  const isLoginOrRegister = ( name === 'Login'|| name ==='Register' );
  (isLogin || isLoginOrRegister ) ? next() : next({ name: 'Login' })

3. 使用breforeEach函数

to，from，next是规定的参数 指每次做路由跳转之前都会执行的方法，不管路由切换的时候都会执行
1）next()方法可以理解为中间件继续执行的方法 ，路由的控制参数，常用的有next(true)和next(false)
2）to是跳到哪个页面的信息
3）from是从哪里跳过来

4. 现在点击登陆之后，只能添加isLogin，页面跳转还要自己手动跳转。 解决办法：获取router的实例，利用push对路由进行操作。

const useLoginEffcet = (showToast) => {
  const router = useRouter()
  const data = reactive({username: "", password: ""})
// 请求后端的逻辑，异步操作
  const handleLogin = async () => {
      //  发一个请求
      // 先执行await中的代码，后面的地址出错的时候，就会抛出
    try {
      const result = await post("/api/user/login", {
        username: data.username,
        password: data.password,
      });
       if (result?.errno === 0) {
        localStorage.isLogin = true;
        router.push({ name: "Home" });
      } else {
        showToast("登陆失败");
      }
    } catch (e) {
      showToast("请求失败");
    }
  }
  const {username,password } = toRefs (data)
  return {username,password,handleLogin}
}

学习收获：

学会了使用元素垂直居中的效果，路由守卫实现基础登陆校验功能！