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中,在侧边栏遍历展示权限路由菜单