首页 > 其他分享> 文章详细

项目一（Vue3 - TypeScript - element-plus）

2022-07-21 02:31:52 阅读：212 来源： 互联网

标签：TypeScript element token 登陆 Vue3 router login path 路由

项目一：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路径

数据筛选搜索

数据分页

职位信息的多选编辑

标签：TypeScript,element,token,登陆,Vue3,router,login,path,路由
来源： https://www.cnblogs.com/yoe-note/p/16500511.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9