摘要：導讀很久沒有寫文章了最近一直在忙之前一直想著可以把項目中的頁面使用進行重寫前幾天算是階段性的完成了這個計劃后期會隨著的模塊不斷增多對其進行對應的升級與擴展簡介項目源碼已托管到碼云上使用技術實現了什么功能基于進行登陸時的認證支持跨域需要后臺配

很久沒有寫文章了,最近一直在忙,之前一直想著可以把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: "http://",
          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 起手式