token是相对会叫安全的使用暗码形式的数据传输,由后台产生,并且传输到前台,前台可以将保存,在前台每次发送请求的时候可以携带token,后台可以对token进行验证,通过验证的通过请求可以对数据进行正确的回复,否则就睡返回错误的回执码
token有自己的过期时限,并且是在后台实现,前台虚无考虑那么多,具体前台的步骤分为三部
1.在登陆的时候后台会给一个token码,前台将其存储在cookie,localstroage或者localsession中即可
请注意需要在tooken的前边拼接字符串’Bearer '+,固定格式
login(){
axios.post('/user/login',this.user).then((res)=>{
localStorage.setItem('token',"Bearer "+res.data.res.token)
})
}
2.在router中设置守卫导航
判断token是否存在,如果存在将携带token进行下一簇的操作,如果不存在,则返回登陆
router.beforeEach((to,from,next)=>{
if(to.matched.some((route)=>route.meta.Auth)){
if(localStorage.getItem('token')){
next()
}else{
next({
path:'/login',
query:{
returnURL:to.path
}
})
}
}else{
next()
}
})
3.在axios的请求拦截器中携带tooken进行请求
axios.interceptors.request.use(config=>{
const token=localStorage.getItem('token')
// if(token){
token?config.headers.Authorization=token:null;
// }
return config
});
每次请求时都会携带token,后台验证不验证token就是后台的问题了
设置token的回复拦截器,对回执码错误的进行操作处理
axios.interceptors.response.use(res=>{
if(res.data.res_code=== 401){
router.replace('/login');
localStorage.removeItem('token')
}
return res
})
这个根据后台的回执码自行更改就行
=====================================================================================================================================================
1.安装
利用npm安装
npm install axios --save
2.引入即可使用
import axios from 'axios'
3.目录
4.各个文件设置:
(1)env.js
export default {
// 接口地址
baseURL: 'http://localhost:8090/scheduleweb/',
isDev: true
}
(2)index.js
备注:road.js定义了一个新的Vue对象,目的是调用elementUI的提示信息($message,比如当服务器连接失败时,提示“服务器连接失败”),不需要用到的可移除相关配置
import Env from './env';
import axios from 'axios'
import {road} from '../road.js'
import routerIndex from '../router/index'
let token = '';
axios.defaults.withCredentials = false;
axios.defaults.headers.common['token'] = token;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头
//添加一个请求拦截器
axios.interceptors.request.use(function (config) {
let user = JSON.parse(window.sessionStorage.getItem('access-user'));
if (user) {
token = user.token;
}
config.headers.common['token'] = token;
//console.dir(config);
return config;
}, function (error) {
// Do something with request error
console.info("error: ");
console.info(error);
return Promise.reject(error);
});
// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
if (response.data && response.data.code) {
if (parseInt(response.data.code) === 108 || parseInt(response.data.code) === 109 || response.data.msg === 'TOKEN失效,请重新登录' || response.data.msg === 'TOKEN不存在') {
//未登录
response.data.msg = "登录信息已失效,请重新登录";
road.$message.error(response.data.msg);
routerIndex.push('/login');
}
if (parseInt(response.data.code) === -1) {
road.$message.error("请求失败");
}
}
return response;
}, function (error) {
// Do something with response error
console.dir(error);
road.$message.error("服务器连接失败");
return Promise.reject(error);
})
//基地址
let base = Env.baseURL;
//测试使用
export const ISDEV = Env.isDev;
//通用方法
export const POST = (url, params) => {
const getTimestamp = new Date().getTime();
return axios.post(`${base}${url}?timer=${getTimestamp}`, params).then(res => res.data)
}
export const GET = (url, params) => {
const getTimestamp = new Date().getTime();
return axios.get(`${base}${url}?timer=${getTimestamp}`, {params: params}).then(res => res.data)
}
export const PUT = (url, params) => {
return axios.put(`${base}${url}`, params).then(res => res.data)
}
export const DELETE = (url, params) => {
return axios.delete(`${base}${url}`, {params: params}).then(res => res.data)
}
export const PATCH = (url, params) => {
return axios.patch(`${base}${url}`, params).then(res => res.data)
}
(3)api_user.js
该文件具体展示调用方法
import * as API from './'
export default {
//验证手机号是否已注册
isExistUser: params => {
return API.GET('login/isExistUser', params);
},
//注册
register: params => {
return API.POST('login/userRegister', params)
},
//密码登录
login: params => {
return API.POST('login/userLogin', params)
}
}
5.在组件中调用
import API from '../api/api_user'
import md5 from 'js-md5'
export default {
data() {
return {
loading: false
}
},
methods: {
login() { // 登录
let that = this;
that.loading = true; // 按钮点击后设置loading
let params = { // 参数
userName: "user1",
pwd: md5("123456"),
type: 3
}
// 调用接口
API.login(params).then(function (res) {
if (res.code === 0) {
let userInfo = {
id: res.data.user.id,
mobilePhone: res.data.user.mobilePhone,
nickname: res.data.user.userName,
gender: res.data.user.gender,
photo: res.data.user.photo,
token: res.data.token,
timestamp: new Date().getTime()
};
localStorage.setItem('access-user', JSON.stringify(userInfo)); // 将用户信息存到localStorage中
that.$router.replace({path: '/'}); // 登录成功跳转
} else {
that.loading = false;
that.$message.error(res.msg);// elementUI消息提示
}
});
}
}
}