2Vue整合AdminLTE模板

上一次搞定了登录验证和跳转的问题，不过存在一处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文件。