首页> 软件工程> 使用COOKIE实现用户登录

[文章]使用COOKIE实现用户登录

收藏
0 556 0

使用COOKIE实现用户登录

 

黄奇锋

[摘要]

   用户登录后由服务器产生Cookie下发,客户端收到Cookie保存起来,;当浏览器再次访问时,浏览器会将Cookie文件发送给服务器,服务器校验后恢复登录。

Cookie就是用于记录用户在网站上的登录状态。

 

[正文]

一:views配置:添加首页、登录、退出登录方法

首页(home):配置访问入口。

登录(login):当用户、密码验证成功后,通过set_cookie添加cookie配置。

登出(logout):清除cookie配置返回。

 

def home(request):

    """

    home

    """

    return render(request, 'index.html')

 

@csrf_exempt

def login(request):

    """

    用户登录

    """

    req_data = json.loads(request.body)

    username = req_data.get('username')

    password = req_data.get('password')

 

    user_obj = UserInfo.objects.filter(username=username)

 

    # 用户名不存在

    if not user_obj:

        return JsonResponse({'result': False, 'message': '用户不存在'})

 

    # 密码错误

    if not user_obj.filter(password=password):

        return JsonResponse({'result': False, 'message': '密码错误'})

 

    respone = JsonResponse({'result': True, 'message': '成功'})

    respone.set_cookie('lucky_csrftoken', csrf(request)['csrf_token'])

    respone.set_cookie('is_login', True)

    respone.set_cookie('username', username)

    return respone

 

def logout(request):

    """

    退出登录

    """

    response = JsonResponse({'result': True})

    response.delete_cookie('is_login')

    response.delete_cookie('username')

    return response

 

 

二:urls配置:配置首页、登录、退出路由

配置后端路由,给予前端请求使用。

urlpatterns = [

    path('', views.home),

    path('login/', views.login),

    path('logout/', views.logout)

]

 

三:前端home.vue配置

输入密码成功后跳转至此页面,点击注销进入logout

<template>

 

    <div id='home'>

        <h1>

          </h1>

        <a href="/#/logout">注销</a>

        <h2>{{ title }}</h2>

    </div>

 

</template>

 

<script>

 

export default {

  name: 'home',

  data () {

    return {

      title: 'index',

    }

  }

}

</script>

 

<style scoped>

</style>

 

 

四:前端login.vue配置:用户登录界面

点击登录传输用户、密码请求后端login接口,登录成功跳转至首页。

<template>

    <div id='home'>

      <h2>用户登录</h2>

      <p>用户名: <input type="text" name="username" v-model="login.username"></p>

      <p>密码: <input type="password" name="password" v-model="login.password"></p>

      <button @click="auth_user()">登录</button>

    </div>

</template>

 

<script>

 

export default {

  name: 'home',

  data () {

    return {

      login: {

        username: '',

        password: ''

      }

    }

  },

  methods: {

    auth_user () {

      this.axios.post('http://localhost:8000' + '/login/', this.login).then(res => {

        if (res.data.result) {

          this.$router.push({path: '/'})

        } else {

          console.log(res.data)

          alert('登录失败:' + res.data.message)

        }

      })

    }

  }

}

</script>

 

<style scoped>

</style>

 

 

五:前端logout.vue:退出登录界面配置

首页点击注销后跳转至此页面,请求后端接口清空cookie

<template>

    <div id='home' @click="logout()">

      退出成功

    </div>

</template>

 

<script>

 

export default {

  name: 'home',

  data () {

    return {

      login: {

        username: '',

        password: ''

      }

    }

  },

  methods: {

    logout () {

      this.axios.get('http://localhost:8000/logout/').then(res => {

        console.log(res.data)

      })

    }

  }

}

</script>

 

<style scoped>

</style>

 

软件工程
最近热帖
{{item.Title}} {{item.ViewCount}}
近期热议
{{item.Title}} {{item.PostCount}}