修复Vue-AdminLTE集成中的token验证与界面调整

本文档介绍了如何将Vue框架与AdminLTE模板进行整合，以实现后台管理系统的基本功能，特别是关注登录验证和路由权限控制的解决方案。在整合过程中，作者首先提到了一个之前遇到的bug，即在Vue的main.js中，使用全局路由钩子`router.beforeEach`来检查用户是否有权限访问受保护的资源时，如果没有正确处理访问`/login`页面的情况，可能导致无限循环。 修复后的路由钩子代码如下： ```javascript router.beforeEach((to, from, next) => { if (to.path === '/login') { next(); } else if (localStorage.token && new Date().getTime() < localStorage.tokenExpired) { next(); } else { next('/login'); } }) ``` 修复了这个逻辑错误后，系统会避免在没有token或token已过期时无限跳转到登录页面。 接下来，作者介绍了AdminLTE的优势，它是一个基于Bootstrap的漂亮且功能丰富的后台管理模板，提供了导航栏、头部样式和多个jQuery插件，如地图、日历、日期选择器和图表等。在集成过程中，首先要将AdminLTE的index.html内容复制到自定义的`index.vue`组件中，但初始效果可能不理想，因为缺少必要的CSS文件。 为了得到预期的效果，你需要导入Bootstrap CSS，并确保其他相关的AdminLTE CSS和JavaScript文件也被正确引入，以便实现侧边导航菜单、头部布局和组件的交互。在Vue CLI项目中，这些文件通常会通过配置自动加载，但如果是手动集成，可能需要手动添加引用。 总结来说，整合Vue和AdminLTE的关键步骤包括： 1. 使用全局路由钩子处理登录验证和权限控制。 2. 将AdminLTE模板内容整合至Vue组件中。 3. 引入必要的CSS和JavaScript资源，确保页面样式和功能正常工作。 通过这些步骤，开发者能够快速搭建出一个具有美观和实用功能的后台管理系统。