Vue 后台模板 [Vue admin] SanJi Boot Admin Iview

导读：

很久没有写文章了,最近一直在忙,之前一直想着可以把SanJi Boot Security项目中的页面使用 Vue+webpack 进行重写,前几天算是阶段性的完成了这个计划,后期会随着SanJi Boot 的模块不断增多 对其进行对应的升级与扩展

简介:

项目源码已托管到码云上

使用技术：

webpack + Vue + Vue Router + iviewUI

实现了什么功能：

基于token进行登陆时的认证 支持跨域 需要后台配合

修改 config/index.js 文件

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { '/api':
      {
        target:'http://localhost:8089/api',
        changeOrigin:true,
        pathRewrite:{
        '^/api': ''
        }
      }
    }
   ...
  }
}

自定义 axios src/api/http.js 文件

import router from '../router'
import axios from 'axios'
import bus from '../bus'


// axios 配置
axios.defaults.timeout = 30000;

axios.interceptors.request.use(
  config => {
    if (bus.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.Authorization = `${bus.state.token}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 返回 401 清除token信息并跳转到登录页面
          bus.state.token=undefined;
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}
          })
      }
    }
    return Promise.reject(error.response.data)   // 返回接口返回的错误信息
  });
export default axios;

基于Vue Router 在进入页面前进行权限的前端认证

编写 src/router/index.js 文件

import Vue from 'vue'
import Router from 'vue-router'
import bus from '../bus'

Vue.use(Router)

//base

const Index = resolve => require(['../views/Index'], resolve)

const Login = resolve => require(['../views/Login'], resolve)

const Home = resolve => require(['../views/demo/Home'], resolve)

const Forbidden = resolve => require(['../views/demo/403'], resolve)

const NotFound = resolve => require(['../views/demo/NotFound'], resolve)

const Icon = resolve => require(['../views/demo/Icon'], resolve)

const Demo = resolve => require(['../views/demo/Demo'], resolve)

// sys

const UserManager = resolve => require(['../views/sys/User'], resolve)

const RoleManager = resolve => require(['../views/sys/Role'], resolve)



const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/',
      name: 'index',
      component: Index,
      meta: {
        requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
      },
      children: [
        {
          path: '//',
          name: '首页',
          component: Home,
          meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
          },
        },
        {
          path: '/demo',
          name: 'demo',
          component: Demo,
          meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
          },
        }, {
          path: '/icon',
          name: 'icon',
          component: Icon,
          meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
          },
        },
        {
          path: '/sys/user',
          name: '用戶管理',
          component: UserManager,
          meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
            permissions:'sys-user'
          }
        },
        {
          path: '/sys/role',
          name: '角色管理',
          component: RoleManager,
          meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
            permissions:'sys-role'
          }
        },
        {
          path: '/403',
          name: '403',
          component: Forbidden,
        },{
          path: '/*',
          name: '404',
          component: NotFound,
          meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
          }
        }
      ]
    }]
});

router.beforeEach((to, from, next) => {
  if (to.path === "/logout") {
    bus.state.token = undefined;
    next({
      path: '/login'
    })
  }else{
    bus.state.menu_title = to.name;
    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
      // console.log('token:',bus.state.token!=null,bus.state.token,)
      if (bus.state.token!="undefined"&&bus.state.token) {  // 通过vuex state获取当前的token是否存在
        if(to.meta.permissions){
          if(bus.action.hasPermissions(bus,to.meta.permissions)){
            next();
          }else{
            bus.state.menu_title = '403'
            next('/403');
          }
        }else{
          next();
        }
      } else {
        next({
          path: '/login',
          query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
        })
      }
    } else {
      next();
    }
  }
})

export default router;

后台界面主框架 material design 风格

基于material_admin 实现前端界面响应式设计 支持快速切换后台界面主框架

  <Index :current_system="current_system" :system_list="system_list" :user="user" :user_menus="user_menus"
         :menus="menus" :menu_title="bus.state.menu_title"
         @click_sys_switch="sys_switch" @click_search="search" @open_tab="open_tab">
    <transition name="slide-left">
      <router-view></router-view>
    </transition>
  </Index>

目前有哪些功能模块：

用户管理
角色管理
demo表格+Icon图标

界面截图：

登陆页面

用户管理

角色管理

icon

后记

项目已托管 码云
需要配合 sanji-boot-security 使用

学习资料

快速上手 webpack+vue - vue cli 起手式