使用的是Vue Element Admin template 基础模板
1 修改 src/api/user.js
import request from \'@/utils/request\'
export function login(data) {
return request({
url: \'/auth/\',
method: \'post\',
data
})
}
export function getInfo(token) {
return request({
url: \'/userInfo/\',
method: \'post\',
data:{\'token\':token}
})
}
export function logout() {
return request({
url: \'/logout/\',
method: \'post\'
})
}
2 修改src/store/modules/user.js
import { login, logout, getInfo } from \'@/api/user\'
import { getToken, setToken, removeToken } from \'@/utils/auth\'
import { resetRouter } from \'@/router\'
const getDefaultState = () => {
return {
token: getToken(),
name: \'\',
avatar: \'\'
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
}
}
const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response.data
commit(\'SET_TOKEN\', data.token)
setToken(data.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response.data
if (!data) {
return reject(\'Verification failed, please Login again.\')
}
const { name, avatar } = data
commit(\'SET_NAME\', name)
commit(\'SET_AVATAR\', avatar)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
// user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
removeToken() // must remove token first
resetRouter()
commit(\'RESET_STATE\')
resolve()
}).catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
removeToken() // must remove token first
commit(\'RESET_STATE\')
resolve()
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
3,修改src/utils/request.js
import axios from \'axios\'
import { MessageBox, Message } from \'element-ui\'
import store from \'@/store\'
import { getToken } from \'@/utils/auth\'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// [\'X-Token\'] is a custom headers key
// please modify it according to the actual situation
//把Token信息加到请求头部
config.headers[\'X-Token\'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
export default service
4 配置后端接口
from django.http import JsonResponse
from rest_framework.views import APIView
from api import models
from api.logger import logger
def create_token(user):
import hashlib
import time
#获取当前时间戳用作随机字符串
ctime = str(time.time())
m = hashlib.md5(bytes(user,encoding=\'utf-8\'))
m.update(bytes(ctime,encoding=\'utf-8\'))
return m.hexdigest()
class AuthView(APIView):
"""
用户登陆认证，生成并保存token
"""
authentication_classes = []
def post(self,request,*args,**kwargs):
ret = {"code": 200, "status": "success", "data": {"token": None}}
username = request.data.get(\'username\')
password = request.data.get(\'password\')
try:
obj = models.Users.objects.filter(username=username,password=password).first()
if obj:
#为用户创建token,如果已存在则更新，否则创建
token = create_token(username)
models.UserToken.objects.update_or_create(user=obj,defaults={\'token\':token})
ret[\'status\'] = \'success\'
ret[\'data\'][\'token\'] = token
else:
ret[\'code\'] = 401
ret[\'status\'] = \'用户名或密码错误\'
except Exception as e:
logger.error(e)
ret[\'code\'] = 400
ret[\'status\'] = \'error\'
return JsonResponse(ret)
class AuthInfoView(APIView):
"""
获取登陆用户信息
"""
def post(self,request,*args,**kwargs):
ret = {"code":200,"status":"success","data":{"roles":[],"introduction": \'\',
"avatar": \'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif\',
"name": \'\'}}
token = request.data.get(\'token\')
try:
obj = models.UserToken.objects.filter(token=token).first()
if obj:
ret[\'status\'] = \'success\'
ret[\'data\'][\'name\'] = obj.user.username
for i in obj.user.roles.all():
ret[\'data\'][\'roles\'].append(i.title)
else:
ret[\'code\'] = 401
ret[\'status\'] = \'认证失败\'
except Exception as e:
logger.error(e)
ret[\'code\'] = 400
ret[\'status\'] = \'error\'
return JsonResponse(ret)
class LogoutView(APIView):
"""
退出登陆
"""
def post(self,request,*args,**kwargs):
ret = {"code":200,"status":"success","data":\'success\'}
token = request.META.get(\'HTTP_X_TOKEN\')
try:
obj = models.UserToken.objects.filter(token=token).first()
if obj:
obj.delete()
else:
ret[\'code\'] = 401
ret[\'status\'] = \'退出失败\'
except Exception as e:
logger.error(e)
ret[\'code\'] = 400
ret[\'status\'] = \'error\'
return JsonResponse(ret)
5 后端token认证
from rest_framework import exceptions
from rest_framework.authentication import BaseAuthentication
from api import models
class Authentication(BaseAuthentication):
def authenticate(self, request):
#获取请求头部的token
token = request.META.get(\'HTTP_X_TOKEN\')
token_obj = models.UserToken.objects.filter(token=token).first()
if not token_obj:
raise exceptions.AuthenticationFailed(\'用户认证失败\')
return (token_obj.user,token_obj)
ps:携带token认证时出现了跨域问题(中间件配置)
from django.utils.deprecation import MiddlewareMixin
class CORSMiddleware(MiddlewareMixin):
def process_response(self, request, response):
# 添加响应头
# 允许你的域名来获取我的数据
# 允许所有的域名来获取数据
response[\'Access-Control-Allow-Origin\'] = \'*\'
# 允许你携带Content-Type请求头 如果要多的用逗号,隔开
response[\'Access-Control-Allow-Headers\'] = \'*\'
return response
配置setting
MIDDLEWARE = [
\'api.cors.CORSMiddleware\', #跨域请求CORS
]