Day 3 登录页以及路由 (一）

登录页以及路由

需求

作为一个后台管理系统，登录页是必不可少的。登录页的需求也很简单，输入账号密码，有登录、重置按钮即可。主要界面类似这种：

登录提交到后台，校验成功后，跳转到系统主页。

另外一个需求就是路由层面的，即当路由到其它页面时，需要判断登录状态，未登录或登录失效时，需要跳转到登录页。

结构

上述需求涉及到两个东西，路由和页面组件，按照普遍的做法，使用Vue官方推荐Router， 在App.vue中，只保留 RouteView组件，具体页面元素交由view进行渲染。

而登录判断则放到路由守护中处理。

实现

App.vue，现阶段仅需要如下代码即可

<template>
  <el-config-provider>
    <RouterView/>
  </el-config-provider>
</template>

<script setup lang="ts">
</script>

<style lang="less" scoped>
</style>

重点是路由配置，之前的脚手架已经创建好文件，/src/router/index.ts ，直接编辑如下：

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home/index'
    },
    {
      path: '/home/index',
      name: 'home',
      component: () => import('@/views/home/HomeIndex.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login/LoginView.vue')
    }
  ]
})

// 校验登录是否有效
const validateLoginState = () => {
  // Mock 实现
  const timestamp = Date.parse(new Date().toString())
  console.log('timestamp-->' + timestamp)
  return timestamp % 4000 == 0
}

const LOGIN_URL = '/login'

router.beforeEach(async (to, from) => {
  // 判断是否访问登陆页
  if (to.path.toLocaleLowerCase() != LOGIN_URL) {
    // 校验登录是否有效
    if (!validateLoginState()) {
      // 登录失效，跳转到登录页
      console.log('Login State invalid')
      router.push(LOGIN_URL)
    } else {
      console.log('Login State valid')
    }
  }
})
export default router

其中校验登录是否失效暂时用了Mock实现，判断当前时间戳是否为4000的倍数。

接下来就是登录组件， /src/views/login/LoginView.vue，先来个占位实现：

<template>
    Login
    <RouterLink to="/">Go to Home</RouterLink>
</template>

同样，首页 /src/views/home/HomeIndex.vue， 也是先占位实现：

<template>
    Home
</template>

效果如下：

在登录页上不停点击 【Go to Home】， 可以看到日志输出，当 Login State valid 时，就可以正常跳转到 /home/index。

而不停的刷新 /home/index时，也可以看到当 Login State Invalid时，自动跳转到 /login

至此，基本框架搭建好了，后面就是具体实现了。今天没时间了，后面再搞。