【九月打卡】第19天 登陆页面布局开发，路由守卫实现基础登陆校验功能，注册页面开发及路由串联复习

课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节：9-1 登陆页面布局开发，9-2 路由守卫实现基础登陆校验功能，9-3 注册页面开发及路由串联复习

主讲老师：Dell

课程内容：

今天学习的内容包括：登陆页面布局开发， 路由守卫实现基础登陆校验功能，注册页面开发及路由串联复习。

知识点：
每一个路由项有一个 beforeEnter 守卫；整体的路由项有一个 beforeEach 全局前置守卫，通过这两个可以实现登录效验功能

示例代码：
router/index.js

// 引入页面地址
import Home from '../views/home/Home'
import Register from '../views/register/Register'
import Login from '../views/login/Login'

// 配置页面路由
const routes = [{
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/register',
    name: 'Register',
    component: Register,
    // 路由刚进来，页面运行之前加载的方法，beforeEnter方法里包含着to,from,next三个参数。
    // to:表示要去的页面
    // from:从那个页面跳的
    // next：判断条件的，告诉下一步要干嘛，如果只是next()就继续执行事件，反之给她判断。
    beforeEnter(to, from, next) {
      // 定义一个isLogin,赋予本地状态
      const { isLogin } = localStorage;
      // 如果本地已经登录，跳转Home页面，否则继续执行
      isLogin ? next({ name: 'Home' }) : next();
    }
  }, {
    path: '/login',
    name: 'Login',
    component: Login,
    // 点击登录页面时候判断，login状态是否登录了。
    beforeEnter(to, from, next) {
      const { isLogin } = localStorage;
      isLogin ? next({ name: 'Home' }) : next();
    }
  },
]

// 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单

const router = createRouter({
  // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  // routes: routes` 的缩写
  routes
})

// 路由拦截,如果没有登录的话，只能去登录页，或者注册页。
// 根据登录状态，或者前往的页面，判断是否要前往的页面。
router.beforeEach((to, from, next) => {
  const { isLogin } = localStorage;
  const { name } = to;
  const isLoginOrRegister = (name === "Login" || name === "Register");
  (isLogin || isLoginOrRegister) ? next(): next({ name: 'Login' });
})

export default router

课程收获：

今天学了三个小节，差不多把第九章学了三分之一。今天学习的内容是登录注册页面，以前都用过，都不算复杂，期待明天。加油。

今日课程学习时间大约花费 21 分钟。