侧边栏代码重构

.editorconfig

@@ -1,3 +1,4 @@
+# https://editorconfig.org
 root = true
 
 [*]
@@ -7,3 +8,7 @@ indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 

src/api/system/menu.js

@@ -1,85 +1,82 @@
-import request from '@/utils/request'
-
-
+import request from '@/utils/request';
 
 //根据pid 获取菜单
 export function getMenusTree(pid) {
-  return request({
-    url: 'api/menus/lazy?pid=' + pid,
-    method: 'get'
-  })
+    return request({
+        url: 'api/menus/lazy?pid=' + pid,
+        method: 'get'
+    });
 }
 
 export function getMenus(params) {
-  return request({
-    url: 'api/menus',
-    method: 'get',
-    params
-  })
+    return request({
+        url: 'api/menus',
+        method: 'get',
+        params
+    });
 }
 
 //根据id获取上级菜单
 export function getMenuSuperior(ids) {
-  const data = ids.length || ids.length === 0 ? ids : Array.of(ids)
-  return request({
-    url: 'api/menus/superior',
-    method: 'post',
-    data
-  })
+    const data = ids.length || ids.length === 0 ? ids : Array.of(ids);
+    return request({
+        url: 'api/menus/superior',
+        method: 'post',
+        data
+    });
 }
 
 //获取子菜单
 export function getChild(id) {
-  return request({
-    url: 'api/menus/child?id=' + id,
-    method: 'get'
-  })
+    return request({
+        url: 'api/menus/child?id=' + id,
+        method: 'get'
+    });
 }
 
 //构建菜单
 export function bulidMenus() {
-  return request({
-    url: 'api/menus',
-    method: 'post',
-    data
-  })
+    return request({
+        url: 'api/menus',
+        method: 'post',
+        data
+    });
 }
 
 //新增菜单
 export function add(data) {
-  return request({
-    url: 'api/menus',
-    method: 'post',
-    data
-  })
+    return request({
+        url: 'api/menus',
+        method: 'post',
+        data
+    });
 }
 
 //删除菜单
 export function del(ids) {
-  return request({
-    url: 'api/menus',
-    method: 'delete',
-    data: ids
-  })
+    return request({
+        url: 'api/menus',
+        method: 'delete',
+        data: ids
+    });
 }
 
 //修改菜单
 export function edit(data) {
-  return request({
-    url: 'api/menus',
-    method: 'put',
-    data
-  })
+    return request({
+        url: 'api/menus',
+        method: 'put',
+        data
+    });
 }
 
-
 export default {
-  add,
-  edit,
-  del,
-  getMenus,
-  getMenusTree,
-  getMenuSuperior,
-  getChild,
-  getMenusTree
-}
+    add,
+    edit,
+    del,
+    getMenus,
+    getMenusTree,
+    getMenuSuperior,
+    getChild,
+    getMenusTree
+};

src/layout/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <sidebar class="sidebar-container" />
+    <div :class="{hasTagsView:needTagsView}" class="main-container">
+      <div :class="{'fixed-header':fixedHeader}">
+        <navbar />
+        <tags-view v-if="needTagsView" />
+      </div>
+      <app-main />
+      <right-panel v-if="showSettings">
+        <settings />
+      </right-panel>
+    </div>
+    <!--  防止刷新后主题丢失  -->
+    <Theme v-show="false" ref="theme" />
+  </div>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { mapState } from 'vuex'
+import Theme from '@/components/ThemePicker'
+import Cookies from 'js-cookie'
+export default {
+  name: 'Layout',
+  components: {
+    AppMain,
+    Navbar,
+    RightPanel,
+    Settings,
+    Sidebar,
+    TagsView,
+    Theme
+
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj () {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  mounted () {
+    if (Cookies.get('theme')) {
+      this.$refs.theme.theme = Cookies.get('theme')
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: Cookies.get('theme')
+      })
+    }
+  },
+  methods: {
+    handleClickOutside () {
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/mixin.scss';
+@import '~@/assets/styles/variables.scss';
+
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+  padding: 0;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+</style>

src/main.js

@@ -12,30 +12,28 @@ import 'element-ui/lib/theme-chalk/index.css'
 // 代码高亮
 import VueHighlightJS from 'vue-highlightjs'
 import 'highlight.js/styles/atom-one-dark.css'
-// 加载路由
-import './router/routers'
+// 加载权限控制
+import './router/index'
 
 //加载权限指令
 import checkPer from '@/utils/permission'
-//import permission from './components/Permission'
-
-
+import permission from './components/Permission'
 
 // 加载代码高亮
 Vue.use(VueHighlightJS)
 // 加载elementui
-Vue.use(ElementUI,{
-  // 设置element-ui默认大小
-  size:Cookies.get('size') || 'small'
+Vue.use(ElementUI, {
+    // 设置element-ui默认大小
+    size: Cookies.get('size') || 'small'
 })
 //加载权限指令
 Vue.use(checkPer)
-
+Vue.use(permission)
 Vue.config.productionTip = false
 
 new Vue({
-  el: '#app',
-  router,
-  store,
-  render:h=>h(App)
+    el: '#app',
+    router,
+    store,
+    render: h => h(App)
 })

src/router/index.js

@@ -4,20 +4,12 @@ import Config from '@/settings'
 //导入进度条
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
-import {
-  getToken
-} from '@/utils/auth'
-import {
-  filterAsyncRouter
-} from '@/store/modules/permission'
-import {
-  buildMenus
-} from '@/api/system/menu'
-
-
+import { getToken } from '@/utils/auth'
+import { filterAsyncRouter } from '@/store/modules/permission'
+import { buildMenus } from '@/api/system/menu'
 
 NProgress.configure({
-  showSpinner: false
+    showSpinner: false
 })
 
 //重新定向白名单
@@ -28,90 +20,94 @@ const whiteList = ['/login']
 //from：当前路由
 //next:放行或重载
 router.beforeEach((to, from, next) => {
-  // 如果路由标题设置则显示配置标题和目标菜单标题
-  if (to.meta.title) {
-    document.title = to.meta.title + '-' + Config.title
-  }
-  //加载效果
-  NProgress.start()
-  //如果已登录过且要跳转的页面是登录页，执行下一次路由守卫
-  if (getToken()) {
-    if (to.path === '/login') {
-      next({
-        path: '/'
-      })
-      NProgress.done()
-    } else {
-      //判断当前用户是否已拉取完用户信息
-      if (store.getters.roles.length === 0) {
-        //拉取user_info
-        store.dispatch('GetInfo').then(() => {
-          //加载动态路由，拉取菜单
-          loadMenus(next, to)
-        }).catch(() => {
-          store.dispatch('LogOut').then(() => {
-            //重新实例化路由对象 避免bug
-            location.reload()
-          })
-        })
-      } else if (store.getters.loadMenus) {
-        store.dispatch('updateLoadMenus')
-        loadMenus(next, to)
-      } else {
-        next()
-      }
+    // 如果路由标题设置则显示配置标题和目标菜单标题
+    if (to.meta.title) {
+        document.title = to.meta.title + '-' + Config.title
     }
-  } else {
-    //hsa no token
-    //在免登录白名单，直接进入
-    if (whiteList.indexOf(to.path) !== -1) {
-      next()
+    //加载效果
+    NProgress.start()
+    //如果已登录过且要跳转的页面是登录页，执行下一次路由守卫
+    if (getToken()) {
+        if (to.path === '/login') {
+            next({
+                path: '/'
+            })
+            NProgress.done()
+        } else {
+            //保存在store 中路由不为空则放行，判断用户是否拉取用户信息
+            if (store.getters.roles.length === 0) {
+                //拉取user_info
+                store
+                    .dispatch('GetInfo')
+                    .then(() => {
+                        //加载动态路由，拉取菜单
+                        loadMenus(next, to)
+                    })
+                    .catch(() => {
+                        store.dispatch('LogOut').then(() => {
+                            //重新实例化路由对象 避免bug
+                            location.reload()
+                        })
+                    })
+                //登录时未拉取菜单，在此拉取
+            } else if (store.getters.loadMenus) {
+                //防止死循环
+                store.dispatch('updateLoadMenus')
+                loadMenus(next, to)
+            } else {
+                next()
+            }
+        }
     } else {
-      //否则全部重定向到登录页面
-      next(`/loginredirect=${to.fullPath}`)
-      NProgress.done()
+        //hsa no token
+        //在免登录白名单，直接进入
+        if (whiteList.indexOf(to.path) !== -1) {
+            next()
+        } else {
+            //否则全部重定向到登录页面
+            next(`/loginredirect=${to.fullPath}`)
+            NProgress.done()
+        }
     }
-  }
-  NProgress.done()
+    NProgress.done()
 })
 
 export const loadMenus = (next, to) => {
+    buildMenus().then(res => {
+        const sdata = JSON.parse(JSON.stringify(res))
+        const rdata = JSON.parse(JSON.stringify(res))
+        const sidebarRoutes = filterAsyncRouter()
+    })
 
-  buildMenus().then(res => {
-    const sdata = JSON.parse(JSON.stringify(res))
-    const rdata = JSON.parse(JSON.stringify(res))
-    const sidebarRoutes = filterAsyncRouter()
-  })
-
-  rewriteRoutes.push({
-    path: '*',
-    redirect: '/404',
-    hidden: true
-  })
+    rewriteRoutes.push({
+        path: '*',
+        redirect: '/404',
+        hidden: true
+    })
 
-  //存储路由
-  store.dispatch('GenerateRoutes', rewriteRoutes).then(() => {
-    /*
-     * 在addRoutes()之后第一次访问被添加的路由会白屏，
-     * 这是因为刚刚addRoutes()就立刻访问被添加的路由，
-     * 然而此时addRoutes()没有执行结束，
-     * 因而找不到刚刚被添加的路由导致白屏
-    */
-    router.addRoutes(rewriteRoutes)
-    /*
-    * 确保addRoutes()时动态添加的路由已经被完全加载上去
-    * replace: true只是一个设置信息，
-    * 告诉VUE本次操作后，
-    * 不能通过浏览器后退按钮，返回前一个路由
-    */
-    next({
-      ...to,
-      replace: true
+    //存储路由
+    store.dispatch('GenerateRoutes', rewriteRoutes).then(() => {
+        /*
+         * 在addRoutes()之后第一次访问被添加的路由会白屏，
+         * 这是因为刚刚addRoutes()就立刻访问被添加的路由，
+         * 然而此时addRoutes()没有执行结束，
+         * 因而找不到刚刚被添加的路由导致白屏
+         */
+        router.addRoutes(rewriteRoutes)
+        /*
+         * 确保addRoutes()时动态添加的路由已经被完全加载上去
+         * replace: true只是一个设置信息，
+         * 告诉VUE本次操作后，
+         * 不能通过浏览器后退按钮，返回前一个路由
+         */
+        next({
+            ...to,
+            replace: true
+        })
     })
-  })
-  store.dispatch('SetSidebarRouters', sidebarRoutes)
+    store.dispatch('SetSidebarRouters', sidebarRoutes)
 }
 
 router.afterEach(() => {
-  NProgress.done()
+    NProgress.done()
 })

src/router/routers.js

@@ -1,28 +1,59 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Config from '@/settings'
-
+import Layout from '../layout/index'
 
 //加载路由
 Vue.use(Router)
 
-
 //路由映射
 export const constantRouterMap = [
-    {
+  {
     //路径
     path: '/login',
     //路由过渡信息，此处使用面包屑功能或判断用户是否登录
-    meta: {
-      title: '登录',
-      noCache: true
-    },
+    meta: { title: '登录', noCache: true },
     //加载组件
     component: (resolve) => require(['@/views/login'], resolve),
-    //是否展示该理由
+    //是否展示该路由
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: (resolve) => require(['@/views/features/404'], resolve),
     hidden: true
+  },
+  {
+    path: '/401',
+    component: (resolve) => require(['@/view/features/401'], resolve),
+    hidden: true
+  },
+  {
+    path: '/redirect',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/redirect/:path*',
+        component: (resolve) => require(['@/views/features/redirect'], resolve),
+        name: 'Dashboard',
+        meta: { title: '首页', icon: 'index', affix: true, noCache: true }
+      }
+    ]
+  },
+  {
+    path: '/user',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'center',
+        component: (resolve) => require(['@/views/system/user/center'], resolve),
+        name: '个人中心',
+        meta: { title: '个人中心' }
+      }
+    ]
   }
-
 ]
 
 export default new Router({

src/store/index.js

@@ -1,4 +1,4 @@
-import Vue from "vue"
+import Vue from 'vue'
 import Vuex from 'vuex'
 import getters from './getters'
 
@@ -7,20 +7,17 @@ Vue.use(Vuex)
 //实现自动导入模块
 const modulesFiles = require.context('./modules', true, /\.js$/)
 
-
 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
-
-  //获取上级目录modules的 所有后缀名为 .js的文件
-  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
-  const value = modulesFiles(modulePath)
-  modules[moduleName] = value.default
-  return modules
+    //获取上级目录modules的 所有后缀名为 .js的文件
+    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
+    const value = modulesFiles(modulePath)
+    modules[moduleName] = value.default
+    return modules
 }, {})
 
-
 const store = new Vuex.Store({
-  modules,
-  getters
+    modules,
+    getters
 })
 
 export default store

src/store/modules/api.js

@@ -1,28 +1,28 @@
 //适配Nginx反向代理
-const baseUrl = process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API
+const baseUrl =
+    process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API;
 
 //适配API路径
 const api = {
-  state: {
+    state: {
+        //部署包上传
+        //deployUploadApi: baseUrl + '/api/deploy/upload',
 
-    //部署包上传
-    //deployUploadApi: baseUrl + '/api/deploy/upload',
+        //图片上传
+        imagesUplaodApi: baseUrl + '/api/localStorage/pictures',
 
-    //图片上传
-    imagesUplaodApi: baseUrl + '/api/localStorage/pictures',
+        //上传图像
+        updateAvatarApi: baseUrl + '/api/users/updateAvatar',
 
-    //上传图像
-    updateAvatarApi: baseUrl + '/api/users/updateAvatar',
+        //文件上传
+        fileUploadApi: baseUrl + '/api/localStorage',
 
-    //文件上传
-    fileUploadApi: baseUrl + '/api/localStorage',
+        // swagger
+        swaggerApi: baseUrl + '/swagger-ui.html',
 
-    // swagger
-    swaggerApi: baseUrl + '/swagger-ui.html',
+        //基础url
+        baseApi: baseUrl
+    }
+};
 
-    //基础url
-    baseApi: baseUrl
-  }
-}
-
-export default api
+export default api;

src/store/modules/permission.js

@@ -1,86 +1,88 @@
-import { constantRouterMap } from "@/router/routers";
-import Layout from '@/layout/index'
-import ParentView from '@/components/ParentView'
+import { constantRouterMap } from '@/router/routers';
+import Layout from '@/layout/index';
+import ParentView from '@/components/ParentView';
 
 const permission = {
-  //存放状态
-  state: {
-    routers: constantRouterMap,
-    addRouters: [],
-    sidebarRouters: []
-  },
-  //同步更改状态
-  mutations: {
-    SET_ROUTERS: (state, routers) => {
-      state.addRouters = routers
-      state.routers = constantRouterMap.concat(routers)
+    //存放状态
+    state: {
+        routers: constantRouterMap,
+        addRouters: [],
+        sidebarRouters: []
     },
-    SET_SIDEBAR_ROUTERS: (state, routers) => {
-      state.sidebarRouters = constantRouterMap.concat(routers)
-    }
-  },
-  //发送异步请求拿到数据
-  actions: {
-    GenerateRoutes({
-      commit
-    }, asyncRouter) {
-      commit('SET_ROUTERS', asyncRouter)
+    //同步更改状态
+    mutations: {
+        SET_ROUTERS: (state, routers) => {
+            state.addRouters = routers;
+            state.routers = constantRouterMap.concat(routers);
+        },
+        SET_SIDEBAR_ROUTERS: (state, routers) => {
+            state.sidebarRouters = constantRouterMap.concat(routers);
+        }
     },
-    SetSidebarRouters({
-      commit
-    }, sidebarRouter) {
-      commit('SET_SIDEBAR_ROUTERS', sidebarRouter)
+    //发送异步请求拿到数据
+    actions: {
+        GenerateRoutes({ commit }, asyncRouter) {
+            commit('SET_ROUTERS', asyncRouter);
+        },
+        SetSidebarRouters({ commit }, sidebarRouter) {
+            commit('SET_SIDEBAR_ROUTERS', sidebarRouter);
+        }
     }
-  }
-
-}
+};
 
 //遍历后台传来的路由字符串，转换为组件对象
 export const filterAsyncRouter = (routers, isRewrite = false) => {
-  return routers.filter(router => {
-    if (isRewrite && router.children) {
-      router.children = filterChildren(router.children)
-    }
-    if (router.component) {
-      if (router.component === 'Layout') { // Layout组件特殊处理
-        router.component = Layout
-      } else if (router.component === 'ParentView') {
-        router.component = ParentView
-      } else {
-        const component = router.component
-        router.component = loadView(component)
-      }
-    }
-    if (router.children && router.children.length) {
-      router.children = filterAsyncRouter(router.children, router, isRewrite)
-    }
-    return true
-  })
-}
+    return routers.filter(router => {
+        if (isRewrite && router.children) {
+            router.children = filterChildren(router.children);
+        }
+        if (router.component) {
+            if (router.component === 'Layout') {
+                // Layout组件特殊处理
+                router.component = Layout;
+            } else if (router.component === 'ParentView') {
+                router.component = ParentView;
+            } else {
+                const component = router.component;
+                router.component = loadView(component);
+            }
+        }
+        if (router.children && router.children.length) {
+            router.children = filterAsyncRouter(
+                router.children,
+                router,
+                isRewrite
+            );
+        }
+        return true;
+    });
+};
 
 function filterChildren(childrenMap) {
-  var children = []
-  childrenMap.forEach((el, index) => {
-    if (el.children && el.children.length) {
-      if (el.component === 'ParentView') {
-        el.children.forEach(c => {
-          c.path = el.path + '/' + c.path
-          if (c.children && c.children.length) {
-            children = children.concat(filterChildren(c.children, c))
-            return
-          }
-          children.push(c)
-        })
-        return
-      }
-    }
-    children = children.concat(el)
-  })
-  return children
+    var children = [];
+    childrenMap.forEach((el, index) => {
+        if (el.children && el.children.length) {
+            if (el.component === 'ParentView') {
+                el.children.forEach(c => {
+                    c.path = el.path + '/' + c.path;
+                    if (c.children && c.children.length) {
+                        children = children.concat(
+                            filterChildren(c.children, c)
+                        );
+                        return;
+                    }
+                    children.push(c);
+                });
+                return;
+            }
+        }
+        children = children.concat(el);
+    });
+    return children;
 }
 
-export const loadView = (view) => {
-  return (resolve) => require([`@/views/${view}`], resolve)
-}
+export const loadView = view => {
+    return resolve => require([`@/views/${view}`], resolve);
+};
 
-export default permission
+export default permission;

src/utils/permission.js

@@ -3,26 +3,28 @@ import store from '@/store' //引入状态管理组件
 export default {
     install(Vue) {
         // 添加属性
-        Vue.prototype.checkPer=(value)=>{
+        Vue.prototype.checkPer = value => {
             // 判断是否为数组对象且长度小于0
-            if(value && value instanceof Array && value.length > 0){
-                const roles=store.getters && store.getters.roles
-                const permissionRoles=value
+            if (value && value instanceof Array && value.length > 0) {
+                const roles = store.getters && store.getters.roles
+                const permissionRoles = value
 
-                const hasPermission=roles.some(role=>{
+                const hasPermission = roles.some(role => {
                     //检测role值并返回
                     return permissionRoles.includes(role)
                 })
 
                 //判断hasPermission
-                if(!hasPermission){
+                if (!hasPermission) {
                     return false
                 }
                 return true
                 // 否则返回错误
-            }else {
+            } else {
                 //需要角色拥有admin editor 权限
-                console.error(`need roles! Like v-permission="['admin','editor']"`)
+                console.error(
+                    `need roles! Like v-permission="['admin','editor']"`
+                )
                 return false
             }
         }

src/utils/request.js

@@ -1,121 +1,125 @@
-import axios from "axios"
+import axios from 'axios'
 import router from '@/router/routers'
-import { Notification } from 'element-ui'  //elementUI 提示框组件
+import { Notification } from 'element-ui' //elementUI 提示框组件
 import store from '../store'
 import { getToken } from '@/utils/auth'
 import Config from '@/settings'
-import Cookies from "js-cookie"
-
+import Cookies from 'js-cookie'
 
 //二次封装axios,创建axios 实例
 const service = axios.create({
-  //api 的 base_url在.env.development有配置
-  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/',
-  //请求超时时间
-  timeout: Config.timeout
+    //api 的 base_url在.env.development有配置
+    baseURL:
+        process.env.NODE_ENV === 'production'
+            ? process.env.VUE_APP_BASE_API
+            : '/',
+    //请求超时时间
+    timeout: Config.timeout
 })
 
-
 //添加请求拦截器
 service.interceptors.request.use(
-   // 在发送请求之前做些什么
-  config => {
-    //如果获取token
-    if (getToken()) {
-      //每次请求都附带上header的Authorization
-      config.headers['Authorization'] = getToken()
+    // 在发送请求之前做些什么
+    config => {
+        //如果获取token
+        if (getToken()) {
+            //每次请求都附带上header的Authorization
+            config.headers['Authorization'] = getToken()
+        }
+        //请求格式
+        config.headers['Content-Type'] = 'application/json'
+        return config
+    },
+    error => {
+        //对请求错误的处理
+        Promise.reject(error)
     }
-    //请求格式
-    config.headers['Content-Type'] = 'application/json'
-    return config
-  },
-  error => {
-    //对请求错误的处理
-    Promise.reject(error)
-  }
 )
 
 //添加响应拦截器
 service.interceptors.response.use(
-  //响应后要做的事情
-  response => {
-    //返回响应数据
-    return response.data
-  },
-  //响应错误处理
-  error => {
-    //兼容blob下载出错json提示
-    if (error.response.data instanceof Blob && error.response.data.type.toLowerCase().indexOf('json') !== -1) {
-      //创建文件读取对象
-      const reader = new FileReader()
-      //读取指定的Blob中错误信息内容
-      reader.readAsText(error.response.data, 'utf-8')
-      //读取文件完成后触发onload事件
-      reader.onload = function (e) {
-        //转换错误信息
-        const errorMsg = JSON.parse(reader.result).message
-        //通知提醒框返回错误信息
-        Notification.error({
-          title: errorMsg,
-          duration: 5000
-        })
-      }
-    } else {
-      let code = 0
-      //捕获错误信息
-      try {
-        //获取响应错误状态码
-        code = error.response.data.status
-      } catch (e) {
-        //做请求超时判断
-        if (error.toString().indexOf('Error:timeout') !== -1) {
-          Notification.error({
-            title: '网络请求超时',
-            duration: 5000
-          })
-          //拿到回调信息并返回
-          return Promise.reject(error)
-        }
-      }
-      console.log(code)
-      //错误代码判断
-      if (code) {
-        if (code === 401) {
-          //跳转401并写入Cookies
-          store.dispatch('LogOut').then(() => {
-            // 用户登录界面提示
-            Cookies.set('point', 401)
-            //重新加载
-            location.reload()
-          })
-        } else if (code === 403) {
-          //如果是403直接返回401页面路径
-          router.push({
-            path: '/401'
-          })
+    //响应后要做的事情
+    response => {
+        //返回响应数据
+        return response.data
+    },
+    //响应错误处理
+    error => {
+        //兼容blob下载出错json提示
+        if (
+            error.response.data instanceof Blob &&
+            error.response.data.type.toLowerCase().indexOf('json') !== -1
+        ) {
+            //创建文件读取对象
+            const reader = new FileReader()
+            //读取指定的Blob中错误信息内容
+            reader.readAsText(error.response.data, 'utf-8')
+            //读取文件完成后触发onload事件
+            reader.onload = function(e) {
+                //转换错误信息
+                const errorMsg = JSON.parse(reader.result).message
+                //通知提醒框返回错误信息
+                Notification.error({
+                    title: errorMsg,
+                    duration: 5000
+                })
+            }
         } else {
-          //获取错误信息
-          const errorMsg = error.response.data.message
-          if (errorMsg !== undefined) {
-            //告知提示框错误信息
-            Notification.error({
-              title: errorMsg,
-              duration: 5000
-            })
-          }
+            let code = 0
+            //捕获错误信息
+            try {
+                //获取响应错误状态码
+                code = error.response.data.status
+            } catch (e) {
+                //做请求超时判断
+                if (error.toString().indexOf('Error:timeout') !== -1) {
+                    Notification.error({
+                        title: '网络请求超时',
+                        duration: 5000
+                    })
+                    //拿到回调信息并返回
+                    return Promise.reject(error)
+                }
+            }
+            console.log(code)
+            //错误代码判断
+            if (code) {
+                if (code === 401) {
+                    //跳转401并写入Cookies
+                    store.dispatch('LogOut').then(() => {
+                        // 用户登录界面提示
+                        Cookies.set('point', 401)
+                        //重新加载
+                        location.reload()
+                    })
+                } else if (code === 403) {
+                    //如果是403直接返回401页面路径
+                    router.push({
+                        path: '/401'
+                    })
+                } else {
+                    //获取错误信息
+                    const errorMsg = error.response.data.message
+                    if (errorMsg !== undefined) {
+                        //告知提示框错误信息
+                        Notification.error({
+                            title: errorMsg,
+                            duration: 5000
+                        })
+                    }
+                }
+            } else {
+                //否则把请求接口失败告知提示框
+                Notification.error({
+                    title: '接口请求失败',
+                    duration: 5000
+                })
+            }
         }
-      } else {
-        //否则把请求接口失败告知提示框
-        Notification.error({
-          title: '接口请求失败',
-          duration: 5000
-        })
-      }
-    }
 
-    //返回错误
-    return Promise.reject(error)
-  }
+        //返回错误
+        return Promise.reject(error)
+    }
 )
 
 export default service

src/views/login.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="login" :style="'background-image:url('+ Background +');'">
+  <div class="login" :style="'background-image:url('+ Background +');'">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
       <h3 class="title">
         阅行集成后台管理
@@ -33,7 +33,7 @@
       </el-form-item>
     </el-form>
     <!--  底部  -->
-     <!-- <div v-if="$store.state.settings.showFooter" id="el-login-footer">
+    <!-- <div v-if="$store.state.settings.showFooter" id="el-login-footer">
       <span v-html="$store.state.settings.footerTxt" />
       <span> ⋅ </span>
       <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
@@ -42,16 +42,16 @@
 </template>
 
 <script>
-import { encrypt } from "@/utils/rsaEncrypt";
-import Config from "@/settings";
-import Cookies from "js-cookie";
-import Background from "@/assets/images/background.jpg";
+import { encrypt } from "@/utils/rsaEncrypt"
+import Config from "@/settings"
+import Cookies from "js-cookie"
+import Background from "@/assets/images/background.jpg"
 import { getCodeImg } from '@/api/login'
 
 export default {
   //输出模块名称
   name: 'Login',
-  data() {
+  data () {
     return {
       //背景图
       Background: Background,
@@ -96,7 +96,7 @@ export default {
     },
   },
   // 使用钩子初始化获取信息
-  created() {
+  created () {
     //获取验证码
     this.getCode();
     //获取用户名密码等 Cookie
@@ -106,14 +106,14 @@ export default {
   },
   methods: {
     //获取验证码方法
-    getCode() {
+    getCode () {
       getCodeImg().then((res) => {
         this.codeUrl = res.img;
         this.loginForm.uuid = res.uuid;
       });
     },
     //获取Cookie
-    getCookie() {
+    getCookie () {
       const username = Cookies.get('username');
       let password = Cookies.get('password');
       const rememberMe = Cookies.get('rememberMe');
@@ -127,7 +127,7 @@ export default {
         code: '',
       };
     },
-    handleLogin() {
+    handleLogin () {
       this.$refs.loginForm.validate((valid) => {
         // 获取登录信息
         const user = {
@@ -175,7 +175,7 @@ export default {
         }
       });
     },
-    point() {
+    point () {
       const point = Cookies.get('point') !== undefined;
       if (point) {
         this.$notify({