一個管理系統(一)•VUE+Element UI 寫一個登陸頁面

Login.vue

<template>
  <div class="login-container">
    <el-form :model="ruleForm2" :rules="rules2"
             status-icon
             ref="ruleForm2"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-page">
      <h3 class="title">系統登錄</h3>
      <el-form-item prop="username">
        <el-input type="text"
                  v-model="ruleForm2.username"
                  auto-complete="off"
                  placeholder="用戶名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password"
                  v-model="ruleForm2.password"
                  auto-complete="off"
                  placeholder="密碼"
        ></el-input>
      </el-form-item>
      <el-checkbox
        v-model="checked"
        class="rememberme"
      >記住密碼
      </el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native="handleSubmit" :loading="logining">登錄</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        logining: false,

        // 默認顯示
        ruleForm2: {
          username: '',
          password: '',
        },

        rules2: {
          username: [{required: true, message: '賬號不能爲空', trigger: 'blur'}],
          password: [{required: true, message: '密碼不能爲空', trigger: 'blur'}]
        },
        checked: false
      }
    },
    methods: {
      handleSubmit(event) {
        var that = this

        this.$axios.request({
          url: 'http://127.0.0.1:8000/LoginAuth/',
          method: 'POST',
          data: {
            username: this.ruleForm2.username,
            password: this.ruleForm2.password
          },
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
        }).then(function (arg) {
            console.log(arg.data)
            console.log(arg.data.token)
            if (arg.data.code === 1000) {
              that.$store.commit('saveToken', {
                'token': arg.data.token,
                'username': that.ruleForm2.username,
                'nickname': arg.data.nickname
              })
              console.log('if判斷結束')
              var url = that.$route.query.backUrl
              if (url) {
                console.log('進入到了用戶攔截器判斷')
                that.$router.push({path: url})
              } else {
                // that.$router.push({path: '/Home'})
                that.$router.push({path: '/Home'})
              }
              console.log('用戶攔截器判斷結束')

              that.$message({
                message: '恭喜你，登陸成功',
                type: 'success',
                center: true
              });
            } else {
              that.$message({
                message: '請輸入正確的賬號或密碼！',
                type: 'error',
                center: true
              });
            }
          }
        ).catch(function (arg) {
          alert('發生錯誤')
        })
      }
    },
  }


</script>

<style scoped>
  .login-container {
    width: 100%;
    height: 100%;
  }

  .login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
  }
</style>

 

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'


Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login,
      meta: {
        keepAlive: false
      }
    },
  ]
})

 

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'


// 引入 axios
import axios from 'axios'

// 引入 ElmentUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 引入 Vuex
import Vuex from 'vuex'

// 引入 store
import store from './store/store'

// 引入 iview
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.config.productionTip = false
Vue.prototype.$axios = axios
Vue.use(ElementUI);
Vue.use(iView);
Vue.use(Vuex);


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: {App},
  template: '<App/>'
})


//攔截器 做用戶登陸認證
router.beforeEach(function (to, from, next) {
  if (to.meta.requireAuth) {
    if (store.state.token) {
      next()
    } else {
      next({
        name: 'login',
        query: {backUrl: to.fullPath}
      })
    }
  } else {
    next()
  }
})