vue+djiango实现登录功能

思路

1、前端输入用户名+密码发送登录请求给后端
2、后端接到请求后，验证用户名和密码准确性，验证通过返回状态和token给前端。
3、前端收到后端验证登录结果，进行跳转，并将后端返回token保存到本地localStorage
4、前端路由时检查本地token是否存在，不存在返回登录页面，存在的跳转
5、退出登录清除本地token
6、登录页开发一个忘记密码功能

login页面主要代码：

handleLogin() {
      this.loading = true
      if ((this.loginForm.username !== '' && this.loginForm.password !== '')) {
        const jse = new JSEncrypt() // 实例化一个 jsEncrypt 对象
        jse.setPublicKey(assetConst.publickey) // 配置公钥
        const userAccount = jse.encrypt(this.loginForm.username) // 加密账号
        const passWord = jse.encrypt(this.loginForm.password) // 加密密码
        axios.post(platformBaseUrl + '/api/login/', { 'username': userAccount, 'password': passWord })
          .then(response => {
            console.log(response.data)
            this.loading = false
            // eslint-disable-next-line eqeqeq
            if (response.data.result.isLogin == 1) {
            // 存储token到本地
              console.log({ 'token': response.data.token, 'username': response.data.username })
              this.$store.commit('$_setToken', response.data.token)
              this.$store.commit('$_setUser', response.data.username)
              this.$message.success('登录成功')
              // 跳转到主页
              this.$router.push({ path: this.redirect || '/' })
            } else {
              this.$message.error('校验失败，用户名或者密码错误！')
              // return false
            }
          })
          .catch(err => {
            this.loading = false
            console.log('请求异常! ', err)
            this.$message.error('咦!怎么报错了!我写的代码怎么会有问题,一定是环境问题!')
          })
      } else {
        this.loading = false
        this.$message.warning('用户名和密码不能为空')
      }
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

新建store目录，index.js写入保存缓存的代码

```python
const store = new Vuex.Store({
  modules,
  getters,
  state: {
    // 登陆状态
    // token存储
    token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
  },
  mutations: {
    $_setToken(state, value) { // 设置存储token
      state.token = value
      localStorage.setItem('token', value)
    },
    $_setUser(state, value) { // 设置存储token
      state.token = value
      localStorage.setItem('username', value)
      console.log(localStorage.getItem('username'))
    },
    $_removeStorage(_state, _value) { // 删除token
      localStorage.removeItem('token')
    }
  }
})
export default store
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

在main.js加入路由拦截功能

import axios from 'axios'
Vue.prototype.$http = axios
Vue.config.productionTip = false

Vue.prototype.$http.defaults.baseURL = '/api'
// http request 拦截器
// 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
  // 为请求头对象，添加token验证的Authorization字段
  var token = localStorage.getItem('token')
  var username = localStorage.getItem('username')
  if (username & token) {
    config.headers.token = token
    config.headers.username = username
  }
  return config
})

// 登录拦截
router.beforeEach((to, from, next) => {
  console.log(to.meta.requireAuth)
  if (to.meta.requireAuth) {
    // requireAuth若为true,则该路由需要判断是否登录
    if (window.localStorage.token) {
      next()
    } else {
      next({ // 返回登录页面
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

new Vue({
  axios,
  router,
  store,
  render: h => h(App)
}).$mount('#app')
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

前端基本就开发完成了。
后端需要开发一个登录接口
主要代码如下

 def login(self):
        param = self.body
        username = param.get("username")
        password = param.get("password")
        #解密
        username=RSAUtils.decrypt(username, privateKey)
        password = RSAUtils.decrypt(password, privateKey)
        try:
            sql = f'select * from user where username="{username}"'
            user = DBmananger().callMysql(sql)[0]
            logger.info(f"password:{password}")
            logger.info(f"user.passwd:{user.get('password')}")
        except Exception as e:
            date = {'flag': 'login fail', "msg": f'{e}'}
            logger.error(e)
            self.data["result"] = date
            return self.data
        if password == user.get('password'):
            date_msg = "登陆成功"
            isLogin = 1
            #获取token
            self.data['token']=create_token(username)
            self.data['username'] =username
        else:
            date_msg = "密码输入错误"
            isLogin = 0
        self.data["result"] = {'isLogin': isLogin, 'msg': date_msg}
        return self.data
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

思路大概就是这个思路，但是初写肯定会有各种问题，主要看报错，缺什么补什么，按照思路来总会出现你想要的画面。
将源码贡献出来吧有需要的可自取：
https://download.csdn.net/download/kairui_guxiaobai/87234242