摘要：導(dǎo)讀很久沒有寫文章了最近一直在忙之前一直想著可以把項(xiàng)目中的頁面使用進(jìn)行重寫前幾天算是階段性的完成了這個(gè)計(jì)劃后期會(huì)隨著的模塊不斷增多對(duì)其進(jìn)行對(duì)應(yīng)的升級(jí)與擴(kuò)展簡(jiǎn)介項(xiàng)目源碼已托管到碼云上使用技術(shù)實(shí)現(xiàn)了什么功能基于進(jìn)行登陸時(shí)的認(rèn)證支持跨域需要后臺(tái)配

很久沒有寫文章了,最近一直在忙,之前一直想著可以把SanJi Boot Security項(xiàng)目中的頁面使用 Vue+webpack 進(jìn)行重寫,前幾天算是階段性的完成了這個(gè)計(jì)劃,后期會(huì)隨著SanJi Boot 的模塊不斷增多 對(duì)其進(jìn)行對(duì)應(yīng)的升級(jí)與擴(kuò)展

項(xiàng)目源碼已托管到碼云上

webpack + Vue + Vue Router + iviewUI

基于token進(jìn)行登陸時(shí)的認(rèn)證 支持跨域 需要后臺(tái)配合

修改 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，如果存在的話，則每個(gè)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信息并跳轉(zhuǎn)到登錄頁面
          bus.state.token=undefined;
          router.replace({
            path: "login",
            query: {redirect: router.currentRoute.fullPath}
          })
      }
    }
    return Promise.reject(error.response.data)   // 返回接口返回的錯(cuò)誤信息
  });
export default axios;

基于Vue Router 在進(jìn)入頁面前進(jìn)行權(quán)限的前端認(rèn)證

編寫 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,  // 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
      },
      children: [
        {
          path: "http://",
          name: "首頁",
          component: Home,
          meta: {
            requireAuth: true,  // 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
          },
        },
        {
          path: "/demo",
          name: "demo",
          component: Demo,
          meta: {
            requireAuth: true,  // 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
          },
        }, {
          path: "/icon",
          name: "icon",
          component: Icon,
          meta: {
            requireAuth: true,  // 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
          },
        },
        {
          path: "/sys/user",
          name: "用戶管理",
          component: UserManager,
          meta: {
            requireAuth: true,  // 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
            permissions:"sys-user"
          }
        },
        {
          path: "/sys/role",
          name: "角色管理",
          component: RoleManager,
          meta: {
            requireAuth: true,  // 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
            permissions:"sys-role"
          }
        },
        {
          path: "/403",
          name: "403",
          component: Forbidden,
        },{
          path: "/*",
          name: "404",
          component: NotFound,
          meta: {
            requireAuth: true,  // 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
          }
        }
      ]
    }]
});

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) {  // 判斷該路由是否需要登錄權(quán)限
      // console.log("token:",bus.state.token!=null,bus.state.token,)
      if (bus.state.token!="undefined"&&bus.state.token) {  // 通過vuex state獲取當(dāng)前的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}  // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
        })
      }
    } else {
      next();
    }
  }
})

export default router;

后臺(tái)界面主框架 material design 風(fēng)格

基于material_admin 實(shí)現(xiàn)前端界面響應(yīng)式設(shè)計(jì) 支持快速切換后臺(tái)界面主框架

用戶管理
角色管理
demo表格+Icon圖標(biāo)

登陸頁面

用戶管理

角色管理

icon

項(xiàng)目已托管 碼云
需要配合 sanji-boot-security 使用

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