前端架構之vue+axios 前端實現登陸攔截（路由攔截、http攔截）

前言：

以前寫了一個node的jwt認證，爲了能和node對應，跑通整個流程，前端將設置登陸攔截，分別爲路由攔截，http攔截。更多文件請看 github地址

和node server 對應：前端架構之node jwt認證

大體流程：在進行路由跳轉時，利用vue-router提供的鉤子函數beforeEach()對路由進行判斷，符合條件next()，不符合便跳轉到登陸頁面。在發送請求時，統一處理全部http請求和響應，用上 axios 的攔截器，經過配置http resquest interceptors爲http頭增長Authorization字段，其內容爲Token，經過配置http response interceptors對返回的數據處理。

目錄結構：

使用vue-cli構建項目，vue init webpack name

主要說一下src文件吧，assets放置靜態文件，components放置一些公共組件，pages放置一些主要頁面，router配置路由文件

在config>index.js配置proxyTable

proxyTable: {
  '/api': { // '/api':匹配項
    target: 'http://127.0.0.1:3000/',//設置你調用的接口域名和端口號 別忘了加http
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''//這裏理解成用‘/api’代替target裏面的地址，後面組件中咱們掉接口時直接用api代替 好比我要調用'http://127.0.0.1:3000/user/add'，直接寫‘/api/user/add’便可
    }
  }
},複製代碼

路由攔截

在router>index.js中配置beforeEach

//路由跳轉以前
router.beforeEach((to, from, next) => {
  if (to.path !== '/login' && !localStorage.token) {
    return next('/login')
  }
   next()
})複製代碼

每一個鉤子方法接收三個參數：
* to: Route: 即將要進入的目標 路由對象
* from: Route: 當前導航正要離開的路由
* next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
* next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
* next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。
* next(‘/’) 或者 next({ path: ‘/’ }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。

確保要調用 next 方法，不然鉤子就不會被 resolved。

這種方式只是簡單的前端路由控制，並不能真正阻止用戶訪問須要登陸權限的路由。還有一種狀況即是：當前token失效了，可是token依然保存在本地。這時候你去訪問須要登陸權限的路由時，實際上應該讓用戶從新登陸。
這時候就須要結合 http 攔截器 + 後端接口返回的http 狀態碼來判斷。

攔截器

新建一個http.js來配置axios攔截器，統一處理全部http請求和響應，就得用上 axios 的攔截器。經過配置http resquest interceptors爲http頭增長Authorization字段，其內容爲Token，經過配置http response interceptors，當後端接口返回401 Unauthorized（未受權），讓用戶從新登陸。

assets>js>http.js

import axios from 'axios'

const http = axios.create()
// http request 攔截器
// 每次請求都爲http頭增長Authorization字段，其內容爲Token
http.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.common['Authorization'] = token;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// http response 攔截器
http.interceptors.response.use(response => {
  let data = response.data
  if (data.code === 200) {
    return data.data
  }
  if (data.code === 401) {
    window.location.href = '/login'
  }
  return Promise.reject(data)
}, error => {
  return Promise.reject(error)
})

export default http複製代碼

至此，就實現了攔截，只須要在登陸那邊設置Token並存進localStorage裏便好。

login.vue

login(){
  console.log(1111)
  this.$http.post('/api/login').then(res => {
      localStorage.setItem('token', res)
      location.replace('/index')
  })
}複製代碼

這樣即可以實現登陸認證，能夠和以前的node後臺那邊對應，到時候將會慢慢繼續完善...

待續1...

很久都沒完善這個項目了，主要是不知道應該作一個怎麼樣的項目，有想法的能夠留言，我能夠嘗試作一下，此次稍微完善了一下

看圖，添加了登陸界面，和主頁，醜是醜了點，勉強看看吧

主頁，大概分爲左邊的導航，右邊的頂部，下面內容，和一個封裝好的本身的組件，你們能夠參考一下，主要是在全局註冊一些本身封裝的組件，就不需在頁面中引用了。

目錄

大概講一下，pages放頁面，pages->base放的是主頁的左邊導航、頭部和內容，chens是放本身封裝的組件

router

稍微改了一下，router的配置

Vue.use(Router)

// 設置默認路由
let defaultRouter = [

]
// 設置其餘角色路由
let routerMap = {

}

// 設置通用路由
let routerArr = [
  {
    path: '/login',
    name: 'login',
    component: login,
  },
  {
    path: '/index',
    component: Layout,
    children: [
      {
        path: '/',
        component: resolve => {
          require(['@/components/home'], resolve)
        }
      },
      {
        path: '/first',
        component: resolve => {
          require(['@/pages/first/first'], resolve)
        }
      },
      {
        path: '/second1',
        component: resolve => {
          require(['@/pages/second/second1'], resolve)
        }
      },
      {
        path: '/second2',
        component: resolve => {
          require(['@/pages/second/second2'], resolve)
        }
      }
    ]
  },
  {path: '/', redirect: 'login'}
]
const router = new Router({
  mode: 'history',
  routes: routerArr
})複製代碼

其餘的都很簡單的

首頁 layout

引用side-bar 和 headers

<template>
  <div class="app">
    <side-bar/>
    <section class="main">
      <headers/>
      <section class="page">
        <router-view/>
      </section>
    </section>
  </div>
</template>複製代碼

封裝本身的組件

mian.js 

import ChenUI from './chens'

Vue.use(ChenUI) 

複製代碼

chens->index.js 遍歷組件，導出

import Chen from './chen/index'
const components = [
  Chen
]
// 遍歷組件const install = function (Vue) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}
export default install複製代碼

chen->index.vue 接收option、tools

<template>
<div class="chen-search-pager">
  <section class="search-pager-warp">
    <router-link :to="option.back" class="router-link">
      <i class="el-icon-back"></i>
      <span class="title">{{this.option.title}}</span>
    </router-link>
    <div class="tools-warp" v-if="tools">
        <el-button  v-for="(item, index) in tools" :key="index" @click="btnClick(item)">
          <i :class="iconClass(item)"></i>{{item.label}}
        </el-button>
    </div>
  </section>
</div>
</template>

<script>
  export default {
    name: "chen",
    props: {
      option: {
        type: Object,
        default: () => ({})
      },
      tools: Array
    },
    data () {
      return {

      }
    },
    methods: {
      btnClick (item) {
        item.func && item.func(item)
      },
      iconClass (item) {
        return 'el-icon-' + item.icon
      }
    }
  }
</script>

<style lang="less" scoped>
  .chen-search-pager {
    .search-pager-warp {
      padding: 10px 20px;
      line-height: 40px;
      border-bottom: 2px solid #fff;
      .router-link {
        font-size: 18px;
        i {
          font-size: 15px;
          font-weight: 700;
          color: #cc0b8b;
        }
        .title {
          color: #333;
          font-size: 16px;
          font-weight: 700;
          padding-left: 6px;
        }
      }
      .tools-warp {
        display: inline-block;
        float: right;
        &:after {
          clear: both;
        }
      }
      .el-button {
        border: none;
        background: none;
        color: #cc0b8b;
      }

    }
  }
</style>
複製代碼

option配置 接收一個對象 title和back

option: {
  title: '沒想到吧',
  back: '/first'
},複製代碼

tools配置 接收一個數組

tools: [
  {
    label: '刷新',
    icon: 'reset',
    func: () => { console.log('沒想到吧')}
  },
  {
    label: '新增',
    icon: 'plus'
  },
  {
    label: '刪除',
    icon: 'delete'
  }
]複製代碼

至此就實現了本身的封裝的組件，能夠在任意組件中調用了...

待續...