前端架构之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'
  }
]复制代码

至此就实现了本身的封装的组件，能够在任意组件中调用了...

待续...