Vue 項目 Vue + restfulframework

Vue 項目 Vue + restfulframework

實現登陸認證

- django

views

class MyResponse():
   def __init__(self):
       self.status = 100
       self.msg = None

   @property
   def get_dic(self):
       return self.__dict__
   
#token
def get_token(username):
   import hashlib
   import time
   md = hashlib.md5()
   # update內必須傳bytes格式
   md.update(username.encode('utf-8'))
   md.update(str(time.time()).encode('utf-8'))
   return md.hexdigest()
#認證
class Login(APIView):
   authentication_classes = []
   def post(self, request):
       response = MyResponse()
       name = request.data.get('username')
       pwd = request.data.get('password')
       user = models.User.objects.filter(username=name, password=pwd).first()
       print(name,pwd)
       name1 =request.GET.get('username')
       print(name1)
       if user:
           response.msg = '登錄成功'
           response.username = name
           # 登錄成功，返回一個隨機字符串，之後在發請求，都攜帶這個字符串
           token = get_token(name)
           response.token = token
           #     把隨機字符串保存到數據庫,有就更新，沒有就建立
           #     ret=models.UserToken.objects.update_or_create(user_id=user.id,kwargs={'token':token})
           ret = models.UserToken.objects.update_or_create(user=user, defaults={'token': token})

       else:
           response.msg = '用戶名或密碼錯誤'
           response.status = 101
       obj = JsonResponse(response.get_dic)
       obj['Access-Control-Allow-Origin']='*'
       return obj


#解決跨域問題 中間件
from django.utils.deprecation import MiddlewareMixin

class CorsMiddleWare(MiddlewareMixin):
   def process_response(self,request,response):
       if request.method=="OPTIONS":
           print(111)
           #不能加*
           response["Access-Control-Allow-Headers"]="*"
       response["Access-Control-Allow-Origin"] = "*"
       response['Access-Control-Allow-Methods'] = 'POST'
       return response

setting

把中間件添加到setting的配置中
註釋csrftoken認證
MIDDLEWARE = [
    'app01.views.CorsMiddleWare',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

urls

urlpatterns = [
    re_path('login/', views.Login.as_view()),
]

- Vue

安裝包

cnpm install --save axios vuex
npm install vue-cookie --save

route.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Index from '../src/components/index.vue'
// import Login from '../src/components/Login.vue'


Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/index',
      name: 'Index',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // 兩種均可以,要不上面導入進來,或者直接定vue組件的路徑
      // component: () => import(/* webpackChunkName: "about" */ '../src/components/index.vue')
      component:Index
    },
      {
          path: '/login',
          name: 'Login',
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "about" */ '../src/components/Login.vue')
      }
  ]
})

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    username:Cookie.get('username'),
    token:Cookie.get('token')
      // Cookie.get('username') Cookie.get('token')
  },
  mutations: {
    //組件中經過this.$store.commit(參數)調用
    saveToken (state,data) {
        state.username = data.username;
        state.token = data.token;
        Cookie.set('username',data.username,'1min');
        Cookie.set('token',data.token,'1min')
    },
    //清空token和cookie
      clearToken (state) {
          state.username = null;
          state.token = null;
          Cookie.remove('username');
          Cookie.remove('token')
      }

  },
  actions: {

  }
})

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Axios from 'axios'
import VueCookie from 'vue-cookies'
// import 'bootstrap/dist/css/bootstrap.css'
Vue.prototype.$axios = Axios;
Vue.prototype.$Cookies = VueCookie;

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

App.vue

<template>
    <div>
        <!--首頁裏面永遠都是固定的東西-->

        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        <img alt="Brand">
                    </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <router-link to="/index">首頁</router-link>
                        </li>
                        <li>
                            <router-link to="/micro">學位課</router-link>
                        </li>
                        <li>
                            <router-link to="/course">課程</router-link>
                        </li>
                        <li>
                            <router-link to="/news">深科技</router-link>
                        </li>
                        <li v-if=this.$store.state.username>
                            <span>歡迎 {{ this.$store.state.username }} 登陸
                                <a @click="logout">註銷</a>
                            </span>
                        </li>
                        <li v-else="">
                            <router-link to="/login">登陸</router-link>
                        </li>
                        <!--{{ this.$store.state.username }}-->
                    </ul>
                </div>
            </div>
        </nav>
        <router-view></router-view>

    </div>
</template>
<script>
    export default {
        name: 'App',
        methods: {
            logout() {
                this.$store.state.username = '';
                this.$store.state.token = ''
            }
        }
    }
</script>
<style>

</style>

components --> Login.vue

<template>
    <div class="container ">
        <h2 class="modal-title">登陸頁面</h2>
        <p></p>
        <p></p>
        <p></p>
        <div class="form-group " >
            <label for="1111" >
                用戶名
            </label>
            <input type="text" class="form-control  " v-model="username" placeholder="username" id="1111">
        </div>
        <div class="form-group ">
            <label for="">
                密碼
            </label>
            <input type="text" class="form-control  " placeholder="password" v-model="password">
        </div>
        <p>
            {{ msg }}
        </p>
        <button @click="DoLogin()" class="btn btn-success">提交</button>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                username:'',
                password:'',
                msg :''
            }
        },
        methods:{
            DoLogin(){
                let _this = this;
                this.$axios.request({
                    url:'http://127.0.0.1:8000/login/',
                    method:"POST",
                    data:{
                        "username": this.username,
                        "password": this.password
                    },
                    // responseType:'json',
                }).then(function (res) {
                    window.console.log(res.data)
                    window.console.log(res.data.status)
                    if (res.data.status == 100){
                        _this.title = res.data;
                        _this.$store.commit('saveToken',res.data)
                        _this.$router.push('/index');
                    }else {
                        _this.msg = res.data.msg;
                        _this.$data.passowrd = ''
                    }


                })
            }
        }
    }
</script>

<style scoped>

</style>

components -> index.vue

<template>

    <div class="row">
        <h2>
            {{ msg }}
        </h2>
        <div class="col-md-2">
            <div style="background-color: #2aabd2">
1
            </div>
        </div>
        <div style="width: 100%">
            <div style="background-color: #8c8c8c">
2
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                msg: '這是首頁'
            }
        }
    }
</script>

<style scoped>

</style>