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 实现前端界面响应式设计 支持快速切换后台界面主框架

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

登陆页面

用户管理

角色管理

icon

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

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