比如app.vue调用了某个接口,要在后台给菜单添加接口API,添加完菜单API还得给角色添加这个权限,如果没有这个权限这个角色就调用不了接口
header中添加请求头携带token,后台根据token判断此角色是否有权限调用接口
interceptors(instance) {
/**
* 请求拦截器
*/
instance.interceptors.request.use(
config => {
const token = localStorage.getItem("USER_TOKEN");
if (token) {
config.headers["Authorization"] = "Bearer " + token;
}
// 请求时缓存该请求,路由跳转时取消, 如果timeout值过大,可能在上一个次请求还没完成时,切换了页面。
config.cancelToken = new axios.CancelToken(async cancel => {
await store.dispatch("app/execCancelToken", { cancelToken: cancel });
});
return config;
},
error => {
return Promise.reject(error);
}
);
}
当取消了这个角色的权限,后台就会 init 该角色无权限的方法,返回403