目录:
依赖:
npm install --save axios qs js-cookie
auth.js
const TokenKey = 'token'
const TokenStorageMode = 'localStorage'
const TokenExpireTime = 1800000
const TokenExpireKey = 'TokenExpireKey'
// import Cookies from 'js-cookie' // TokenStorageMode为'cookie'时用
export function getToken() {
// 'cookie'
if (TokenStorageMode === 'cookie') {
return Cookies.get(TokenKey)
}
// 'localStorage'
const expireTime = localStorage.getItem(TokenExpireKey)
let token = localStorage.getItem(TokenKey)
if (TokenExpireTime > 0 && expireTime && Date.now() > parseInt(expireTime)) {
// token过期了...
token = null
removeToken()
}
return token
}
export function setToken(token) {
if (TokenStorageMode === 'cookie') {
// Cookies.set(TokenKey, token)
return
}
localStorage.setItem(TokenKey, token)
localStorage.setItem(TokenExpireKey, Date.now() + TokenExpireTime)
}
export function removeToken() {
if (TokenStorageMode === 'cookie') {
// Cookies.remove(TokenKey)
return
}
localStorage.removeItem(TokenKey)
localStorage.removeItem(TokenExpireKey)
}
request.js
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router from '../router/index'
const TokenStorageMode = 'localStorage'
let unLoginDialogOpen = false;
// create an axios instance
const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
withCredentials: false, // send cookies when cross-domain requests
timeout: 10000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
const token = getToken()
if (token) {
if (TokenStorageMode === 'localStorage') {
// 如果由本地管理,则需要在头文件增加token
config.headers['token'] = getToken()
}
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
if (process.env.VUE_APP_TOKEN_MODE === 'jwt') {
const action = response.headers['action']
if (action === 'create') {
// console.log('token创建,保存token...')
setToken(response.headers['token'])
}
if (action === 'update') {
// console.log('刷新token...')
setToken(response.headers['token'])
}
if (action === 'delete') {
// console.log('删除token...')
removeToken()
}
}
// if the custom code is not 000000, it is judged as an error.
if (res.code !== '000000') {
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === '100001' || res.code === '100005' || res.code === '100007' || res.code === '100011') {
// to re-login
if(!unLoginDialogOpen){
unLoginDialogOpen = true
MessageBox.confirm(res.msg, '提示', {
confirmButtonText: '确定',
showClose: false,
showCancelButton: false,
closeOnClickModal: false,
closeOnPressEscape: false,
type: 'warning',
beforeClose:function(action, instance, done){
unLoginDialogOpen = false
done()
}
}).then(() => {
router.push('/login')
})
}
} else {
Message({
message: res.msg || '自定义内容',
type: 'error',
duration: 5 * 1000
})
}
return Promise.reject(new Error(res.msg || 'Error'))
} else {
return res
}
},
error => {
Message({
message: '网络连接错误,请重试!',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
import axios from 'axios'
// import { MessageBox, Message } from 'element-ui'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router from '../router/index'
const TokenStorageMode = 'localStorage'
let unLoginDialogOpen = false;
// create an axios instance
const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
withCredentials: false, // send cookies when cross-domain requests
timeout: 10000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
const token = getToken()
if (token) {
if (TokenStorageMode === 'localStorage') {
// 如果由本地管理,则需要在头文件增加token
config.headers['token'] = getToken()
}
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
const action = response.headers['action']
if (action === 'create') {
// console.log('token创建,保存token...')
setToken(response.headers['token'])
}
if (action === 'update') {
// console.log('刷新token...')
setToken(response.headers['token'])
}
if (action === 'delete') {
// console.log('删除token...')
removeToken()
}
if (response.data.code == '200' ) {
return response.data.data
}
},
error => {
return Promise.reject(error)
}
)
export default service
api-api.js
import request from '@/utils/request'
import qs from 'qs'
export const BASIC_URL = 'http://localhost:8080'
// 登录
export function reqLogin(data) {
return request({
url: BASIC_URL + '/login',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: qs.stringify(data)
})
}
index.vue
import { reqLogin } from '@/api/api'
reqLogin({ userName: username.trim(), password: password })
.then( res => {
if (that.form.isRecord){
Cookies.set('loginInfo', that.form, { expires: 7 })
} else {
Cookies.set('loginInfo', "{}", { expires: 7 })
}
this.$router.replace('/msite')
}).catch(()=>{
})
关于qs:
https://www.npmjs.com/package/qs
关于登录页记住密码:
https://blog.csdn.net/weixin_59128282/article/details/118438918?spm=1001.2014.3001.5501