Client使用axios封装请求，在请求发送前拦截添加Headers，在接收到响应后进行拦截判断。
- npm安装依赖
npm install axios -S - 创建request.js实现对request和response的拦截处理
import axios from 'axios'
import router from '../router'
// 创建axios实例
const service = axios.create({
baseURL: process.env.SERVER_URL, // api 的 base_url process.env.BASE_API
timeout: 5000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
if (!config.headers['Content-Type']) {
config.headers['Content-Type'] = 'application/json'
}
if (localStorage.getItem(this.tokenKey) && typeof localStorage.getItem(this.tokenKey) !== 'undefined' && JSON.parse(localStorage.getItem(this.tokenKey)).access_token) {
config.headers['Authorization'] = `Bearer ${JSON.parse(localStorage.getItem(this.tokenKey)).access_token}` // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
},
error => {
Promise.reject(error)
})
// response 拦截器
service.interceptors.response.use(response => {
if (response.status >= 200 && response.status < 300) {
return response.data
} else {
let error = new Error(response.statusText)
error.response = response
return Promise.reject(error)
}
},
error => {
if (error.response && error.response.status === 401) {
localStorage.removeItem(this.tokenKey)
router.replace({
path: '/login'
})
} else {
return Promise.reject(error)
}
})
export default service
- 配置路由拦截验证
路由拦截验证用router.beforeEach( (to, from, next) => { } ），to代表要去的路由指向，from是指从哪个路由跳转过来的，next是判断操作，如果为空，表示放行。
修改main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import * as uiv from 'uiv'
import './assets/css/bootstrap.css'
import './assets/css/grails.css'
import './assets/css/main.css'
Vue.config.productionTip = false
Vue.config.tokenKey = 'JWT-Token'
// 路由拦截验证
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
if (localStorage.getItem(this.tokenKey)) {
next()
} else {
next({
path: '/login',
query: {redirect: to.fullPath}
})
}
} else {
next()
}
})
Vue.use(uiv)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- 创建项目时生成了Welcome组件，现在创建一个Login组件
<template>
<div>
<input type="text" v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<button v-on:click="doLogin">登录</button>
</div>
</template>
<script>
import router from '../router'
import request from '../utils/request'
export default {
name: 'Login',
data () {
return {
username: null,
password: null
}
},
methods: {
doLogin: function () {
if (!this.username || !this.password) {
alert('请输入用户名和密码')
} else {
request({
url: '/api/login',
method: 'POST',
data: JSON.stringify({ username: this.username, password: this.password })
}).then(json => {
if (json && typeof json !== 'undefined') {
localStorage.setItem(this.tokenKey, JSON.stringify(json))
router.push({
name: 'Welcome'
})
} else {
alert('登录失败')
}
}).catch(error => {
console.log(error.message)
})
}
}
}
}
</script>
- 修改Welcome.vue
<script>
import request from '../utils/request'
export default {
name: 'Welcome',
data () {
return {
msg: 'Welcome to Your Grails & Vue.js App',
serverInfo: null,
showLinks: false,
serverURL: process.env.SERVER_URL
}
},
methods: {
toggleLinks: function () {
this.showLinks = !this.$data.showLinks
},
fetchInfo: function () {
request({
url: '/application/index',
method: 'POST',
data: JSON.stringify({})
}).then(json => {
this.serverInfo = json
}).catch(error => console.log(error.message))
}
},
created: function () {
this.fetchInfo()
}
}
</script>
-
同时启动server和client，访问client，因为没有登录，会跳转到登录页面，如下图：
login.png
输入错误的用户名密码，提示“登录失败”，如下图：
fail.png
输入正确的用户名密码，跳转到welcome页面，如下图：
success.png
