Vue Element Admin 登陆认证

使用的是Vue Element Admin template 基础模板

1 修改 src/api/user.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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 配置后端接口

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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认证

?
1
2
3
4
5
6
7
8
9
10
11
12
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认证时出现了跨域问题(中间件配置)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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

?
1
2
3
MIDDLEWARE = [
    'api.cors.CORSMiddleware',  #跨域请求CORS
]

　　

 

posted @   丿小贰灬  阅读(1043)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
阅读排行：
· 开发的设计和重构，为开发效率服务
· 从零开始开发一个 MCP Server！
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· Ai满嘴顺口溜，想考研？浪费我几个小时
点击右上角即可分享
微信分享提示