vue+element-ui+js-cookie+store实现登录功能

Z时代
2024-01-10
分类：综合

vue

vue+element-ui+js-cookie+store实现登录功能

脚手架vue-cli3.*


<template>
  <div class="login">
    <div class="logo">
        <h2>后台登录系统</h2>
    </div>
    <div class="loginForm">
      <el-form
        :model="ruleForm2"
        status-icon
        :rules="rules2"
        ref="ruleForm2"
        label-width="100px"
        class="demo-ruleForm"
        v-loading="loading"
      >
        <el-form-item label="用户名" prop="pass">
          <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
          <el-button @click="resetForm('ruleForm2')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie'
import { type } from 'os';
export default {
  name: "login",
    data() {
      var reg = /^[0-9]{6,10}$/
      var regPass = /^[0-9A-Za-z]{6,10}$/
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        }else if(!reg.test(value)){
          callback(new Error('请输入正确格式的用户名'))
        }else{
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }else if(!regPass.test(value)){
          callback('请输入正确格式的密码');
        } else {
          callback();
        }
      };
      return {
        loading:false,
        ruleForm2: {
          pass: '',
          checkPass: '',
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: ['blur'] },
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.loading =true;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$https.post('/api')
                .then(data=>{
                   if(data.data.code==200){
                       setTimeout(() => {
                          Cookies.set('token',data.data.token,30);
                          this.$store.commit('settoken',data.data.token);
                          this.$router.push({path:'/home'});
                          console.log(this.$store.state.token);
                          this.$message('登录成功');
                       }, 2000);
                   }
                })
                .catch(err=>{
                  this.$message('服务器繁忙,请重试');
                    this.$router.push({path:'/'})
                })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    created(){
      console.log(this.$store.state.token);
    }
};
</script>
<style scoped>
.line {
  width: 100% !important;
  height: 100% !important;
  float: none !important;
}
html {
  background-image: url("../assets/bg.jpg");
}
.logo{
    margin-top: 100px;
    text-align: center;
}
.loginForm{
    display: block;
    margin: 0px auto;
    width: 20%; 
}
</style>

main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './App.vue';
import router from './router';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store';
import axios from 'axios';
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.prototype.$https = axios;
new Vue({
	router,
	store,
	render: h => h(App),
}).$mount('#app');

route.js


import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
import Login from './views/Login.vue';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login,
      meta: {
        keepAlive: false,
        test:false,
      },
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        keepAlive: true,
        test:true,
        requireAuth:true,
      },
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: {
        keepAlive: true,
        test:true,
        requireAuth:true,
      },
    },
  ],
});

store.js


import Vue from 'vue';
import Vuex from 'vuex';
import Cookies from 'js-cookie'
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    token:'' || Cookies.get('token'),
  },
  mutations: {
    settoken(state,data){
      state.token =data;
    }
  },
  actions: {
    commitsettoken:({commit},token)=>commit('settoken',token) 
  },
});

App.vue

<template>
  <div id="app">
    <el-row class="tac" v-if="$route.meta.test">
      <el-col :span="12">
        <h5>默认颜色</h5>
        <el-menu default-active="1-1" class="el-menu-vertical-demo">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">
                <router-link to="/home">选项1</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/about">选项2</router-link>
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!-- <div class="clear"></div> -->
    <div class="line">
      <router-view/>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1"
    };
  },
  methods: {
  },
  created(){
  },
};
</script>
<style lang="scss" scoped>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
a {
  text-decoration: none;
  color: black;
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
}
.router-link-active {
  background-color: #ecf5ff;
}
.tac {
  width: 10%;
  margin-right: 0px;
  display: inline-block;
  float: left;
}
.el-col {
  width: 100% !important;
}
.clear {
  clear: both;
}
.line {
  float: left;
  width: 80%;
}
.el-submenu .el-menu-item {
  padding: 0px !important;
  min-width: 0px !important;
}
</style>