结果发现接口请求仍然不带cookie，无奈试了一下用fetch请求`fetch(url, { credentials: 'include', mode: 'cors' })`，发现可以携带cookie，百思不得其解，两者都是基于promise实现的，但是fetch在写法和拦截请求响应等方面都比较麻烦，全部替换成fetch也不太现实。最后才发现，是mock.js没有注释（`main.js`中注释掉就好了），原来mock.js是通过拦截XHR请求来实现的接口模拟，Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，所以它当然被拦截了，而fetch脱离了XHR，这也是fetch请求能正常携带cookie的原因，这里还没有全部梳理清楚，打算在后一篇中详细介绍一下
7.单点登录的实现
全局的路由钩子在`permission.js`中，一般单点登录、权限验证都是在这里处理，这里也不例外。没什么特别的，需要注意的一点就是，不要忘记对页面其他接口的统一无权限处理，和403请求的响应处理。同时画个流程图会更快一些,这里就记录一下吧：
流程图：
路由钩子的处理:
router.beforeEach((to, from, next) => { // 对403无权限的处理 if (to.path === '/403') { next() } else { if (roles) {//已登陆 next() } else { //获取用户信息，GetUserInfo逻辑如下： //status=403 && reject(res)，返回包含status； //status=1005 && reject(res.data)返回重定向的URL； //status=1000 && resolve() store .dispatch('GetUserInfo') .then(res => { next() }) .catch((e) => { if (e.status) { next({ path: '/403' }) } else { //拼接URL跳去登陆页，登陆成功会重定向回当前页（login_redirect） const url = e.substring(0, e.lastIndexOf('redirect')) + 'redirect=' + login_redirect window.location.href = url } }) } } })
`@/ src/utils/request.js`中接口返回的统一处理:
service.interceptors.response.use((response) => { if (response.data.status === 1005){ //... 同上跳去登陆页 }else{ //为返回数据做统一处理 return response.data } }, err)
7.引入eCharts
1）npm install
2) components下新建barChart.vue ,import echarts from 'echarts'，正常操作...
3) resize触发图表自适应
echart有resizeAPI，一般是在图表组件如barChart.vue里面手动监听窗口resize
mounted() { window.addEventListener("resize", () => { this.chart.resize(); }); },
后面借鉴element-admin， 利用mixins实现了更完善的统一处理方法：
1）定义一个mixin:resize.js
import { debounce } from '@/utils'//防抖函数 export default { data() { return { $_sidebarElm: null } }, mounted() { this.__resizeHandler = debounce(() => { if (this.chart) { this.chart.resize() } }, 100) window.addEventListener('resize', this.__resizeHandler) this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) }, beforeDestroy() { window.removeEventListener('resize', this.__resizeHandler) this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) }, methods: { $_sidebarResizeHandler(e) { if (e.propertyName === 'width') { this.__resizeHandler() } } } }
2）@/components/_utils/util.js中添加防抖函数
export const debounce = (func, wait, immediate) => { let timeout, args, context, timestamp, result const later = function() { // 据上一次触发时间间隔 const last = +new Date() - timestamp // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last) } else { timeout = null // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用 if (!immediate) { result = func.apply(context, args) if (!timeout) context = args = null } } } return function(...args) { context = this timestamp = +new Date() const callNow = immediate && !timeout // 如果延时不存在，重新设定延时 if (!timeout) timeout = setTimeout(later, wait) if (callNow) { result = func.apply(context, args) context = args = null } return result } }
3）resize监听方法混入图表组件即可
mixins: [resize]
总结
以上所述是小编给大家介绍的ant-design-vue 快速避坑指南，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: