2021SC@SDUSC
目录
本文分析一下与登录相关的js文件
登录相关
首先分析src/utils/request.js文件,源码如下:
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
const service = axios.create({
baseURL: process.env.BASE_API,
timeout: 20000
})
首先引入axios与MessageBox。接着引入了store和token,这两个我们没有接触过,接下来分析一下这两个组件的用处。
vuex store的使用
我们点进去store所在文件,源码如下:
Vue.use(Vuex)
const initPlugin = store => {
}
const store = new Vuex.Store({
modules: {
app,
user,
cacheView,
help
},
state: { },
plugins: [initPlugin],
actions,
mutations,
getters
})
export default store
vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。我们在request.js文件中引入此组件之后,就可以使用这个建立状态管理。一个完整的store架构包含:
state: {
// 存放状态
},
getters: {
// state的计算属性
},
mutations: {
// 更改state中状态的逻辑,同步操作
},
actions: {
// 提交mutation,异步操作
},
但是request.js中并没有用到这个组件,不知道是什么原因。
token相关
我们点进去这个utils/auth.js文件,部分源码如下:
不难发现,这个是用来身份验证的,提供了一系列和token相关的方法。
什么是token:
Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,很麻烦,而token可以避免这种麻烦。
Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。
回到最初的request.js文件,接着代码中创建了一个axios实例,并定义了baseURL和超时时间timeout。
登录时的request拦截器
request.js文件中接下来的源码如下:
service.interceptors.request.use(
config => {
config.headers['Authorization'] = (getToken() == null || getToken() == undefined) ? '' : getToken()
return config
},
error => {
// Do something with request error
Promise.reject(error)
}
)
config的目的是每次请求之前都在请求中携带token,给headers中的Authorization字段中赋值token,判断逻辑如下:
1. 如果getToken方法(这个方法是引入的auth组件中的方法,上文有提到)返回null或者undefined,就赋值为null
2. 否则就把真实的token复制给eaders中的Authorization字段。
这样,每次请求时都会携带token,后台验证不验证token就是后台的问题了。
登录时的response拦截器
接下来的代码将设置token的回复拦截器,对回执码错误的进行操作处理,源码如下:
service.interceptors.response.use(
response => {
const res = response.data
if (res.code == '50008' || res.code == '50012' || res.code == '50014') {
MessageBox.confirm(
'你已被登出,可以取消继续留在该页面,或者重新登录',
'重新登录',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
sessionStorage.clear()
localStorage.clear()
window.location.href = "/";
})
}
else if (res.code !== '200') {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
return response.data
} else {
return response.data
}
},
error => {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
可以看出来整个的逻辑和AJ-Report项目分析(6)中response拦截器是很相似的。
状态码含义如下:
50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
满足三者之一,就会有弹窗提示,我们可以选择点击重新登录,之后通过:
window.location.href = "/";
回到登录页面。