view-github

使用Vue全家桶+axios实现拦截，登录和退出功能，利用axios的http拦截请求和响应

前言

项目是在学习Vue过程中参考别人作品练习，自己�参考实现；利用GitHub的token授权查看仓库列表。

项目结构（github目录）

├── README.md
├── dist  // 打包构建后的文件夹
    ├── static
    │    ├──css/*
    │    └──js/*
    ├── index.html
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   ├── css.css
    │   ├── icon.css
    │   └── logo.png
    ├── components
    │   ├── home
    │   │   └── home.vue
    │   ├── login
    │   │   └── login.vue
    │   └── repository
    │       └── repository.vue
    ├── constant
    │   └── api.js
    ├── http.js
    ├── main.js
    ├── router
    │   └── index.js
    └── store
        ├── store.js
        └── types.js
└── webpack.config.js

技术栈

Vue 2.0
Vue-router // vue2.0推荐替换Vue-reource
Vuex
axios

登录逻辑

第一步：路由

文件：�src/router/index.js

const routes = [
  {
    path: '/',
    name: '/',
    component: Home
  },
  {
    path: '/repository',
    name: 'repository',
    meta: {
      requireAuth: true // 自定义字段，指示访问该路由需要授权验证
    },
    component: Repository
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

定义路由后，使用vue-router的钩子函数对需要授权的路由进行确认(如有不懂，查看文档)

router.beforeEach((to, from, next) => {
  // 如果token未授权或者token未填写，则跳转到登陆页面
  if (to.matched.some(r => r.meta.requireAuth)) {
    if (store.state.token) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

第二步：配置axios替代vue-rousece，基础配置和拦截

文件：src/http.js

// axios 配置
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'https://api.github.com'

// 设置拦截器
axios.interceptors.request.use(
  config => {
    if (store.state.token) {
      // token 存在，执行下面操作，在请求头内部赋值token
      config.headers.Authorization = `token ${store.state.token}`
    }
    return config
  },
  error => {
    // 失败调用Promise的reject处理
    return Promise.reject(error)
  })

axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 401清除token未授权状态码401
          store.commit(types.LOGOUT)
          router.replace({
            path: 'login',
            query: { redirect: router.currentRoute.fullPath }
          })
      }
    }
    return Promise.reject(error.response.data)
  }
)

以上两步可以实现登录拦截，而退出登录状态只需要清除token即可

第三步：创建相关组件（App，Home，Login，Repository）

文件：src/components/*

关于axios，重点掌握这几方面基本可以在项目中使用axios

发起http请求方法
http请求成功时返回的数据处理
http请求失败时处理
拦截器使用
http配置

运行以及构建

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Tomcat发布问题

webpack打包后生成dist文件夹，index.html文件和static静态文件夹，直接复制到Tomcat应用webapps目录下打开页面空白，需要在打包时修改一处位置即可：

文件：config/index.js

�assetsPublicPath: '/'

=》

assetsPublicPath: './'

Wliz/view-github