上一次搞定了登录验证和跳转的问题，不过存在一处bug。在Vue的main.js中，使用了Vue-router的路由钩子来判断是否可以访问受保护的资源，问题就出在这里，先修复上次的bug。
/* 全局路由钩子 访问资源时需要验证localStorage中是否存在token 以及token是否过期 验证成功可以继续跳转 失败返回登录页重新登录 */ router.beforeEach((to, from, next) => { if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){ next() } else{ next('/login') } })
代码中有一个问题，就是在没有token时如果直接访问/login会产生死循环导致溢出。修改后代码如下
/* 全局路由钩子 访问资源时需要验证localStorage中是否存在token 以及token是否过期 验证成功可以继续跳转 失败返回登录页重新登录 */ router.beforeEach((to, from, next) => { if(to.path == '/login'){ next() } if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){ next() } else{ next('/login') } })
好了，进入正题。先说AdminLTE，这是一个基于bootstrap的后台管理模板，对于我这种排版、设计很渣但又需要一个人搞定所有事的来说确实是个救星。先看看它的效果。
可以看到效果非常棒。其本身还包含了各种各样的jquery插件，map、fullcalendar、datapicker、charts等等。不过这里我们主要用到侧边的导航和头部样式。
第一步，我们创建一个index.vue用作整个系统的主界面，然后把AdminLTE的index文件中的html复制到index.vue的template中。在没有任何设置的情况想效果是这样的。
好吧，辣眼睛。之所以这样是因为我们没有在页面中导入各种css文件。
第二步，导入bootstrap的css文件。如果你是要Vue-cli创建的项目，那么项目中应该已经包含了bootstrap（在node_modules文件夹中）。接下来只要在main.js中引入就可以了。
import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import store from './store/store' import 'bootstrap/dist/css/bootstrap.css'
引入后的效果是这样的
稍微正常了一些，下一步我们需要引入AdminLTE相关的css文件，如果你有AdminLTE的文件应该能在dist中找到css、img、js三个文件夹。把这三个文件夹复制到我们Vue项目的assets中吧。引入的方法还是在main.js中添加。'
import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import store from './store/store' import 'bootstrap/dist/css/bootstrap.css' //AdminLTE import './assets/css/skins/_all-skins.min.css' import './assets/css/AdminLTE.min.css'
引入后的效果
头部似乎正常了，但是body的内容都没有显示出来。原因是AdminLTE是基于bootstrap的，而bootstrap又是需要jquery的。此时我们只引入了css文件，而还没引入所需的js文件。但是此时引入js文件会因为没有jquery而导致引入的文件无法起作用。所以先解决Vue中使用jquery的问题。首先需要通过npm下载jquery到项目中（这里最好和AdminLTE中使用的jquery版本一致，我这里是2.2.3）。打开shell导航到我们项目所在的文件夹使用npm install来安装jquery。
安装好之后应该能在项目的node_modules文件夹中找到jquery文件夹，并且package.json中也记录了项目引用的jquery版本。
接下来要修改项目的webpack配置文件。文件位于项目的build文件夹下，文件名是webpack.base.conf.js。需要在这个文件中新增2处配置。
引入了jquery之后，我们就可以在main.js中继续引入bootstrap和AdminLTE的js文件了。
import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import store from './store/store' //bootstrap import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/js/bootstrap.min.js' //AdminLTE import './assets/css/skins/_all-skins.min.css' import './assets/css/AdminLTE.min.css' import './assets/js/app.min.js'
引入之后再看一下效果
