看个vue+ts系列视频做的笔记

这篇笔记记录了在观看Vue+TS系列视频时的学习重点,包括处理token失效的问题,组件的懒加载与初始化,组件封装技巧,文件上传进度显示,axios接口未封装,路由与props的耦合以及实现RBAC权限控制方案。重点讨论了三种不同的权限对比方法:默认加载所有路由、动态获取用户权限和在Vuex中存储权限路由。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.token失效

access_token    作用:获取需要授权的接口数据
expires_in      作用:access_token 过期时间 (可以没有)
refresh_token   作用:刷新获取新的 access_token
方法一:
发起前拦截每个请求,判断 token 的有效时间是否已经过期,若已过期,则将请求挂起,先刷新 token 后再继续请求
方法二(推荐):
不在请求前拦截,而是拦截返回后的数据,先发起请求,接口返回过期后,先刷新 token,在进行一次重试。

2.组件每次打开都初始化
浏览器也有懒加载,没有动的组件不会进行声明周期,可以给子组件v-if,给子组件销毁

3.封装组件
使用v-model,父组件传值,子组件通过props有个value接收,如果子组件想改变,就this.$emit(“input”),还是有点像父子通信的

props:{
	value:{
        type:Number,
        default:2 //默认值
	}
}

4.上传文件百分比

上传的接口里 onUploadProgress(e) e.loaded 已上传的数据大小 e.total 上传文件的总大小 百分比 
Math.floor(e.loaded/e.total*100)
const {data}=await uploadCourseImage(fd,e=>{this.percentage=Math.floor(e.loaded/e.total*100 )})

5.axios未封装接口

//接口
export const getEditMenuInfo = (id: string | number = -1) => {
    return request({
        method: 'GET',
        url: '/boss/menu/getEditMenuInfo',
    //传参
    params: {
   	 id
    }
})

6.路由跳转与props耦合,持久化

//路由跳转
this.$router.push({
    name:'menu-edit',params:{id:item.id}  })
this.$router.params.id 接收
如果与props耦合,在路由里对应页面添加props,props接收

7.RBAC 前后端权限控制方案
权限对比方法
1.默认加载所有路由表
2.在路由导航钩子中动态获取用户权限列表,判断当前访问路由是否存在
3.权限路由保存在vuex中,在侧边栏遍历展示权限路由菜单

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值