引入Mock.js来提供接口请求服务

config/env.js

@@ -1 +1 @@
-export default 'production'
+export default 'development'

package-lock.json

@@ -9766,6 +9766,15 @@
         }
       }
     },
+    "mockjs": {
+      "version": "1.0.1-beta3",
+      "resolved": "https://registry.npmjs.org/mockjs/-/mockjs-1.0.1-beta3.tgz",
+      "integrity": "sha1-0jTzwnJWOXVk8slVFC6JGQlTcgk=",
+      "dev": true,
+      "requires": {
+        "commander": "2.11.0"
+      }
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -39,6 +39,7 @@
     "less": "^2.7.3",
     "less-loader": "^4.0.5",
     "lint-staged": "^6.0.0",
+    "mockjs": "^1.0.1-beta3",
     "vue-template-compiler": "^2.5.13"
   },
   "browserslist": [

src/components/login-form/login-form.vue

@@ -43,7 +43,7 @@ export default {
   data () {
     return {
       form: {
-        userName: 'iview_admin',
+        userName: 'super_admin',
         password: ''
       }
     }

src/libs/util.js

@@ -163,3 +163,13 @@ export const canTurnTo = (name, access, routes) => {
   const canTurnToNames = getHasAccessRouteNames(routes)
   return canTurnToNames.indexOf(name) > -1
 }
+
+export const getParams = url => {
+  const keyValueArr = url.split('?')[1].split('&')
+  let paramObj = {}
+  keyValueArr.forEach(item => {
+    const keyValue = item.split('=')
+    paramObj[keyValue[0]] = keyValue[1]
+  })
+  return paramObj
+}

src/main.js

@@ -7,6 +7,7 @@ import store from './store'
 import iView from 'iview'
 import i18n from '@/locale'
 import config from '@/config'
+import '@/mock'
 import 'iview/dist/styles/iview.css'
 
 Vue.use(iView)

src/mock/index.js

@@ -0,0 +1,9 @@
+import Mock from 'mockjs'
+import { login, logout, getUserInfo } from './login'
+
+// 登录相关和获取用户信息
+Mock.mock(/\/login/, login)
+Mock.mock(/\/get_info/, getUserInfo)
+Mock.mock(/\/logout/, logout)
+
+export default Mock

src/mock/login.js

@@ -0,0 +1,43 @@
+import { getParams } from '@/libs/util'
+const USER_MAP = {
+  super_admin: {
+    name: 'super_admin',
+    user_id: '1',
+    access: ['super_admin', 'admin'],
+    token: 'super_admin',
+    avator: 'https://file.iviewui.com/dist/a0e88e83800f138b94d2414621bd9704.png'
+  },
+  admin: {
+    name: 'admin',
+    user_id: '2',
+    access: ['admin'],
+    token: 'admin',
+    avator: 'https://avatars0.githubusercontent.com/u/20942571?s=460&v=4'
+  }
+}
+
+export const login = req => {
+  req = JSON.parse(req.body)
+  return {
+    code: 200,
+    data: {token: USER_MAP[req.userName].token},
+    msg: ''
+  }
+}
+
+export const getUserInfo = req => {
+  const params = getParams(req.url)
+  return {
+    code: 200,
+    data: USER_MAP[params.token],
+    msg: ''
+  }
+}
+
+export const logout = req => {
+  return {
+    code: 200,
+    data: null,
+    msg: ''
+  }
+}

src/router/index.js

@@ -31,6 +31,9 @@ router.beforeEach((to, from, next) => {
       next({
         name: LOGIN_PAGE_NAME // 跳转到登录页
       })
+    } else if (!token && to.name === LOGIN_PAGE_NAME) {
+      // 未登陆且要跳转的页面是登录页
+      next() // 跳转
     } else if (token && to.name === LOGIN_PAGE_NAME) {
       // 已登录且要跳转的页面是登录页
       next({

src/store/index.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import user from './module/user'
-import routers from './module/routers'
 import app from './module/app'
 
 Vue.use(Vuex)
@@ -19,7 +18,6 @@ export default new Vuex.Store({
   },
   modules: {
     user,
-    routers,
     app
   }
 })

src/store/module/app.js

@@ -1,9 +1,10 @@
-import { getBreadCrumbList, setTagNavListInLocalstorage, getMenuByRouter, getTagNavListFromLocalstorage } from '@/libs/util'
+import { getBreadCrumbList, setTagNavListInLocalstorage, getMenuByRouter, getTagNavListFromLocalstorage, getHomeRoute } from '@/libs/util'
 import routers from '@/router/routers'
 export default {
   state: {
     breadCrumbList: [],
-    tagNavList: []
+    tagNavList: [],
+    homeRoute: getHomeRoute(routers)
   },
   getters: {
     menuList: (state, getters, rootState) => getMenuByRouter(routers, rootState.user.access)

src/store/module/routers.js

@@ -1,29 +0,0 @@
-// import { getRouterReq } from '@/api/routers'
-import { getHomeRoute } from '@/libs/util'
-import routers from '@/router/routers'
-export default {
-  state: {
-    canViewRouterList: [],
-    homeRoute: getHomeRoute(routers)
-  },
-  mutations: {
-    setRouter (state, canViewRouterList) {
-      state.canViewRouterList = canViewRouterList
-    }
-  },
-  actions: {
-    // getRouter ({ commit, state, rootState }, access) {
-    //   const token = rootState.user.token
-    //   return new Promise((resolve, reject) => {
-    //     if (token) {
-    //       getRouterReq(access).then(res => {
-    //         commit('setRouter', res.data.router)
-    //         resolve(res.data.router)
-    //       }).catch(err => {
-    //         reject(err)
-    //       })
-    //     }
-    //   })
-    // }
-  }
-}

src/view/main/main.vue

@@ -105,7 +105,7 @@ export default {
      * @description 初始化设置面包屑导航和标签导航
      */
     this.setTagNavList()
-    this.addTag(this.$store.state.routers.homeRoute)
+    this.addTag(this.$store.state.app.homeRoute)
     this.setBreadCrumb(this.$route.matched)
   }
 }