*IT axios：足跡第八十步：vue前端框架與路由

1）login.vue

<template>
<el-form size="medium" style="padding-bottom: 1rem;">
  <div class="login-container">
  <table class="table_border" style="width:100%">
    <tbody>
		   <tr >
		      <td class="t_left">
		        <span>用戶名&nbsp;</span>
		        <span style="color:red">*</span>
		      </td>
		      <td>
		        <el-input style="width:100%;" v-model="username" clearable>
		
		        </el-input>
		      </td>
		    </tr>
		    <tr >
		      <td class="t_left">
		        <span>密碼&nbsp;</span>
		        <span style="color:red">*</span>
		      </td>
		      <td>
		        <el-inputstyle="width:100%;" v-model="password" type="password" clearable>
		
		        </el-input>
		      </td>
		    </tr>
        </tbody>
  </table>
  <div class="div_c">
      <el-button icon="el-icon-close"  @click="conso" round>取 消</el-button>
      <el-button icon="el-icon-check"type="primary"@click="submitAdd" round>確 認</el-button>
    </div>
  </div>
</el-form>
</template>

<script>
import { isvalidUsername } from '@/utils/validate'

export default {
  name: 'login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loading: false
    }
  },
  methods: {
 
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: '/system' }) // 登錄後重定向到首頁
          }).catch(() => {
            this.loading = false
            this.$message('用戶名或密碼錯誤')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
    -webkit-text-fill-color: #fff !important;
  }
  input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 12px 5px 12px 15px;
    color: $light_gray;
    height: 47px;
  }

}
</style>

2)導航衛士

import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 進度條
import 'nprogress/nprogress.css'// Progress 進度條樣式
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 驗權

const whiteList = ['/login'] // 不重定向白名單
router.beforeEach((to, from, next) => {
  NProgress.start()
if (getToken()) {
    if (to.path === '/') {
      next({ path: '/login' })
    } else {
      if (store.getters.roles.length === 0) {
        // store.dispatch('GetInfo').then(res => { // 拉取用戶信息
        next()
        // }).catch(() => {
        //   store.dispatch('FedLogOut').then(() => {
        //     Message.error('驗證失敗,請重新登錄')
        //     next({ path: '/login' })
        //   })
        // })
      } else {
        next()
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done() // 結束Progress
})

3)axios發送請求

import axios from 'axios'
import store from '../store'
import { getToken } from '@/utils/auth'

// 創建axios實例
const service = axios.create({
  baseURL: 'http://111.xxx.xxx.xxx:21086',
  timeout: 15000 // 請求超時時間
})

// request攔截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers = {
        // 判斷是否存在token，如果存在的話，則每個http header都加上token
        authorization: 'Bearer ' + getToken(),
        'Content-Type': 'application/json;charset=UTF-8',
        Accept: 'application/json, */*'
      }
    } else {
      config.headers = {
        'Content-Type': 'application/json;charset=UTF-8',
        Accept: 'application/json, text/plain, */*'
      }
    }
    return config
  },
  error => {
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// respone攔截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

4)index.html包含

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>單點登錄系統</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

5)main.js包含App.vue與store.js方法

import Vue from 'vue'
import 'babel-polyfill'

import 'normalize.css/normalize.css'// A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en'

import '@/styles/index.scss' // global css

import App from './App'
import router from './router'
import store from './store'

import i18n from './lang' // Internationalization
import '@/icons' // icon
import '@/permission' // permission control

// Vue.use(ElementUI, { locale })
Vue.use(ElementUI, {
  size: 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  template: '<App/>',
  components: { App }
})

5.1)App.vue包含

<template>
  <div id="app" style="height: 100%;">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
    }
  }
}
</script>
<style>
html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
</style>

5.2)store下index.js包含所有頁面配套的js方法

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import systemUser from './modules/system/user'
import tagsView from './modules/tagsView'
import getters from './getters'
import orginfo from './modules/system/orginfo'
import positioninfo from './modules/system/positioninfo'
import userinfo from './modules/system/userinfo'
import appsystem from './modules/system/appsystem'
import modelBasic from './modules/subsys/model/modelBasic'
import modelPermission from './modules/subsys/model/modelPermission'
import userPermission from './modules/subsys/userPermission'
import userPermissionAdmin from './modules/subsys/userPermissionAdmin'
import userRoleAdmin from './modules/subsys/userRoleAdmin'
import userLog from './modules/subsys/userLog'
import adminLog from './modules/subsys/adminLog'
import orgTree from './modules/orgTree'
import modelTree from './modules/modelTree'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    tagsView,
    user,
    systemUser,
    orginfo,
    positioninfo,
    userinfo,
    appsystem,
    modelBasic,
    modelPermission,
    userPermission,
    userPermissionAdmin,
    userRoleAdmin,
    userLog,
    adminLog,
    orgTree,
    modelTree
  },
  getters
})

export default store

6)菜單框

7)路由js中引入菜單框

8)引入導航框