【项目】Vue3+TS 退出登录 menu header搭建

💭💭

✨:【项目】Vue3+TS 退出登录 menu header搭建

💟:东非不开森的主页

💜: 今天永远比昨天更好💜💜

🌸: 如有错误或不足之处,希望可以指正,非常感谢😉

一、登录模块

1.1. 跳转到主页

路由导航守卫
参考资料: 地址

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航(也就是路由拦截),一般用于访问某些页面的限制,如是否登录或者是否有权限

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。

每个守卫方法接收两个参数:

  • to: 即将要进入的目标
  • from: 当前导航正要离开的路由

在这里插入图片描述

  • 这样写我们可以确保只要不是main下面,那么一定就要返回去登录
router.beforeEach((to) => {
  // 只有登录成功(token), 才能真正进入到main页面
  const token = localCache.getCache(LOGIN_TOKEN)
  if (to.path.startsWith('/main') && !token) {
    return '/login'
  }
})

在这里插入图片描述

在这里插入图片描述

1.2.退出登录

  • 需要定义一个事件,去除token,
    在这里插入图片描述

在这里插入图片描述

1.3.记住密码

这里我们都是在store进行报错的,可以全局共享数据
定义一个变量记录是否记住密码

  • 我们需要把输入的账号密码保存在账号里面然后进行判断
  • 再决定是否需要记住密码
  • 需要就保存进去
  • 不需要就移除

在这里插入图片描述
在这里插入图片描述

  • 需要记住密码,就保存,不需要就清除

在这里插入图片描述

1.4.获取用户信息

在这里插入图片描述

  • token可以写在请求数据那里
  • 但是最好写在拦截器里面

在这里插入图片描述
在这里插入图片描述
这个注意有个空格
这里如果axios版本是1.2.2的话会报错

具体文章: 类型“AxiosHeaders | Partial<RawAxiosHeaders & MethodsHeaders & CommonHeaders>”上不存在属性“Authorization”

在请求拦截器里添加Authorization携带Token
所以要这样写

interceptors: {
    requestSuccessFn: (config) => {
      // 每一个请求都自动携带token
      const token = localCache.getCache(LOGIN_TOKEN)
      if (config.headers && token) {
        // 类型缩小
        typeof config.headers.set === "function" &&
          config.headers.set("Authorization", `Bearer ${token}`)
        // config.headers.Authorization = "Bearer " + token
      }
      return config
    }
  }

这里我们可以给state定义类型,还有要注意我们所要的数据的类型是什么,别搞错了
userInfo/userMenus进行本地缓存
在这里插入图片描述
请求数据
在这里插入图片描述
数据
在这里插入图片描述

二、 menu搭建

在这里插入图片描述
我们可以先搭出来静态页面,然后再进行
在这里插入图片描述
获取数据
在这里插入图片描述

在这里插入图片描述

数据渲染
这里用到了动态组件,动态组件往往用于tab切换,
官方文档:
在这里插入图片描述

在这里插入图片描述

控制折叠
需要定义变量isFold为布尔值

main.vue
在这里插入图片描述
在这里插入图片描述

main-header.vue 图标部分
在这里插入图片描述

自定义时间,传递给父组件
在这里插入图片描述

main-menu.vue
文字部分隐藏显示
在这里插入图片描述
在这里插入图片描述

预览:
请添加图片描述

三、header搭建

header搭建
在这里插入图片描述
在这里插入图片描述
下拉菜单
Dropdown 插槽
在这里插入图片描述
退出登录
我们需要用到路由,还有之前的token
在这里插入图片描述

请添加图片描述

每个页面点击可以切换到对应页面
先构建页面
在这里插入图片描述
在这里插入图片描述

  • 动态的菜单进行权限管理
  • 但是所有的路由都是被注册进去
  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东非不开森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值