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

James clark

已于 2022-03-30 16:34:42 修改

阅读量690

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： vue.js 前端 javascript

于 2022-03-30 14:06:48 首次发布

本文链接：https://blog.youkuaiyun.com/jamesclark/article/details/123844501

笔记专栏收录该内容

1 篇文章

订阅专栏

这篇笔记记录了在观看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中，在侧边栏遍历展示权限路由菜单