Vue 後臺模板 [Vue admin] SanJi Boot Admin Iview

時間 2019-11-08

標籤 vue 後臺模板 admin sanji boot iview 简体版

原文原文鏈接

導讀：

好久沒有寫文章了,最近一直在忙,以前一直想着能夠把SanJi Boot Security項目中的頁面使用 Vue+webpack 進行重寫,前幾天算是階段性的完成了這個計劃,後期會隨着SanJi Boot 的模塊不斷增多對其進行對應的升級與擴展前端

簡介:

項目源碼已託管到碼雲上vue

使用技術：

webpack + Vue + Vue Router + iviewUIwebpack

實現了什麼功能：

基於token進行登錄時的認證支持跨域須要後臺配合ios

修改 config/index.js 文件git

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 文件web

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 在進入頁面前進行權限的前端認證vue-router

編寫 src/router/index.js 文件vuex

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 風格axios

基於material_admin 實現前端界面響應式設計支持快速切換後臺界面主框架segmentfault

<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>