项目一Vue3 - TypeScript - element-plus

项目一：Vue3-TypeScript 电商后台管理

一、技术栈涉及

• Vue3
• TypeScript
• axios
• vue-router
• element-plus
• node.js

二、项目概述

界面展示

登陆页面

商品管理

用户列表

员工信息编辑

职位编辑

修改权限界面（隐藏路由）

本地接口数据

功能

* 实现登陆路由拦截，获取token后才能实现动态路由增加
* 实现商品的管理，可搜索关键字过滤，分页
* 实现公司人员的信息，职位的编辑
* 实现职位的树状权限编辑

重难点功能

动态路由和路由拦截

功能介绍：

在路由的 json 数据中添加路由信息，可以动态的在主界面左侧渲染出对应的标题
当用户还没有登陆时，localStorage没有token，这些路由不进行渲染，保证信息安全，同时重定向回到login路由。

实现思路：

菜单栏的item渲染：

          <el-menu router active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            :default-active="active" text-color="#fff">
            <el-menu-item v-for="i in list" :key="i.path" :index="i.path">
              <el-icon>
                <icon-menu />
              </el-icon>
              <span>{{i.Meta.title}}</span>
            </el-menu-item>
          </el-menu>

代码中的item标签对list数据使用了v-for，调取了每一项的Meta.title填充标题
这里的active是当前的路由，实现第一次登陆时，组件默认选中的item样式变化
list数据由useRouter中的getRoutes获取，路由在其他地方动态添加

  setup(){
    const router = useRouter()
    const route = useRoute()
    const list = router.getRoutes().filter(v => v.Meta.isShow)
  return{
    list,
    active: route.path    // 获取当前路由
  }
  
  }

路由拦截和动态添加路由

//路由拦截,动态路由在router这里做文章
router.beforeEach(async (to) => {//参数：去哪里，从哪来
  //如果没有登陆，进去登陆页面
  const token: string | null = localStorage.getItem('token') //联合类型，不一定拿得到token
  if (!token && to.path != "/login") {
    return '/login'
  } else if (to.path != '/login' && token) { //已登陆
    if (router.getRoutes().length == 2) {
      routerData.data.forEach((i: any) => {
        const routerObj: RouteRecordRaw = {
          path: i.path,
          name: i.name,
          Meta: i.Meta,
          //路径中的注释是方便webpack打包的，request保证引入什么名字文件就打包成什么名字的文件
          component: () => import(/*webpackChunkName: "[request]"*/ `../views/${i.name}.vue`)
        }
        router.addRoute("home", routerObj)
      })
      router.replace(to.path)
    }
  } else if (to.path == '/login' && token) {
    return '/'
  }
})

router的beforeEach有3个参数，to到哪去，from从哪来，next参数控制。to.path获取当前路径
所有路由动作都先经过这个beforeEach，所以可以在这里做登陆拦截。
- 注意：在确认用户成功登陆前，数据管理的路由是不可以添加进routes里的

* 如果没有token且当前路径不是/login的话，就return "/login"，返回登录页
* 如果有token且且路径不是/login，就对路由进行渲染。
* 用router.getRoutes()获取当前已载入的路由数量，如果还是只有login和home两个，就使用router.addRoute给home添加子路由（实际路由数据从接口获取），实现动态路由。
* 添加完路由后，重新进入当前路径，使用router的replace方法
* 最后，如果已有token，但是用户到了/login下，直接跳转进入/home路径

数据筛选搜索

数据分页

职位信息的多选编辑