Vue elelment登录验证简单版

http.js

import axios from 'axios'

import { Message, Loading } from 'element-ui';

import router from './router'

let loading        //定义loading变量

function startLoading() {    //使用Element loading-start 方法

    loading = Loading.service({

        lock: true,

        text: '加载中...',

        background: 'rgba(0, 0, 0, 0.7)'

    })

}

function endLoading() {    //使用Element loading-close 方法

    loading.close()

}

// 请求拦截  设置统一header

axios.interceptors.request.use(config => {

    // 加载

    startLoading()

    if (localStorage.eleToken)

        config.headers.Authorization = localStorage.eleToken

    return config

}, error => {

    return Promise.reject(error)

})

// 响应拦截  401 token过期处理

axios.interceptors.response.use(response => {

    endLoading()

    return response

}, error => {

    // 错误提醒

    endLoading()

    Message.error(error.response.data)

    const { status } = error.response

    if (status == 401) {

        Message.error('token值无效，请重新登录')

        // 清除token

        localStorage.removeItem('eleToken')

        // 页面跳转

        router.push('/login')

    }

    return Promise.reject(error)

})

export default axios

router.js

import Vue from 'vue'

import Router from 'vue-router'

import Index from './views/Index.vue'

import Register from './views/Register'

import Nofind from './views/404'

import Login from './views/Login'

import Home from './views/Home'

import InfoShow from './views/InfoShow'

import FoundList from './views/FoundList'

Vue.use(Router)

const router = new Router({

  mode: 'history',

  base: process.env.BASE_URL,

  routes: [

    { path: '*', name: '/404', component: Nofind },

    { path: '/', redirect: '/index' },

    { path: '/register', name: 'register', component: Register },

    { path: '/login', name: 'login', component: Login },

    {

      path: '/index',

      name: 'index',

      component: Index,

      children: [

        { path: '', component: Home },

        { path: '/home', name: 'home', component: Home },

        { path: '/infoshow', name: 'infoshow', component: InfoShow },

        { path: '/foundlist', name: 'foundlist', component: FoundList }

      ]

    }

  ]

})

// 添加路由守卫

router.beforeEach((to, from, next) => {

  const isLogin = localStorage.eleToken ? true : false;

  if (to.path == "/login" || to.path == "/register") {

    next();

  } else {

    isLogin ? next() : next("/login");

  }

})

export default router;

app.vue

<template>

  <div id="app">

    <router-view/>

  </div>

</template>

<script>

import jwt_decode from "jwt-decode";

export default {

  name: "app",

  created() {

    if (localStorage.eleToken) {

      const decode = jwt_decode(localStorage.eleToken);

      this.$store.dispatch("setIsAutnenticated", !this.isEmpty(decode));

      this.$store.dispatch("setUser", decode);

    }

  },

  methods: {

    isEmpty(value) {

      return (

        value === undefined ||

        value === null ||

        (typeof value === "object" && Object.keys(value).length === 0) ||

        (typeof value === "string" && value.trim().length === 0)

      );

    }

  }

};

</script>

<style>

html,

body,

#app {

  width: 100%;

  height: 100%;

}

</style>

views/login.vue

<template>

    <div class="login">

        <section class="form_container">

            <div class="manage_tip">

                <span class="title">米修在线后台管理系统</span>

            </div>

            <el-form :model="loginUser" :rules="rules" ref="loginForm" class="loginForm" label-width="60px">

                <el-form-item label="邮箱" prop="email">

                    <el-input v-model="loginUser.email" placeholder="请输入邮箱"></el-input>

                </el-form-item>

                <el-form-item label="密码" prop="password">

                    <el-input v-model="loginUser.password" placeholder="请输入密码" type="password"></el-input>

                </el-form-item>

                <el-form-item>

                    <el-button type="primary"  @click="submitForm('loginForm')" class="submit_btn">登  录</el-button>

                </el-form-item>

                <div class="tiparea">

                    <p>还没有账号？现在<router-link to='/register'>注册</router-link></p>

                </div>

            </el-form>

        </section>

    </div>

</template>

<script>

import jwt_decode from "jwt-decode";

export default {

  name: "login",

  data() {

    return {

      loginUser: {

        email: "",

        password: ""

      },

      rules: {

        email: [

          {

            type: "email",

            required: true,

            message: "邮箱格式不正确",

            trigger: "change"

          }

        ],

        password: [

          { required: true, message: "密码不能为空", trigger: "blur" },

          { min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" }

        ]

      }

    };

  },

  methods: {

    submitForm(formName) {

      this.$refs[formName].validate(valid => {

        if (valid) {

          this.$axios.post("/api/users/login", this.loginUser).then(res => {

            // 登录成功

            const { token } = res.data;

            localStorage.setItem("eleToken", token);

            // 解析token

            const decode = jwt_decode(token);

            // 存储数据

            this.$store.dispatch("setIsAutnenticated", !this.isEmpty(decode));

            this.$store.dispatch("setUser", decode);

            // 页面跳转

            this.$router.push("/index");

          });

        } else {

          console.log("error submit!!");

          return false;

        }

      });

    },

    isEmpty(value) {

      return (

        value === undefined ||

        value === null ||

        (typeof value === "object" && Object.keys(value).length === 0) ||

        (typeof value === "string" && value.trim().length === 0)

      );

    }

  }

};

</script>

<style scoped>

.login {

  position: relative;

  width: 100%;

  height: 100%;

  background: url(../assets/bg.jpg) no-repeat center center;

  background-size: 100% 100%;

}

.form_container {

  width: 370px;

  height: 210px;

  position: absolute;

  top: 20%;

  left: 34%;

  padding: 25px;

  border-radius: 5px;

  text-align: center;

}

.form_container .manage_tip .title {

  font-family: "Microsoft YaHei";

  font-weight: bold;

  font-size: 26px;

  color: #fff;

}

.loginForm {

  margin-top: 20px;

  background-color: #fff;

  padding: 20px 40px 20px 20px;

  border-radius: 5px;

  box-shadow: 0px 5px 10px #cccc;

}

.submit_btn {

  width: 100%;

}

.tiparea {

  text-align: right;

  font-size: 12px;

  color: #333;

}

.tiparea p a {

  color: #409eff;

}

</style>

store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const types = {

  SET_IS_AUTNENTIATED: 'SET_IS_AUTNENTIATED', // 是否认证通过

  SET_USER: 'SET_USER' // 用户信息

}

const state = { // 需要维护的状态

  isAutnenticated: false,  // 是否认证

  user: {}   // 存储用户信息

}

const getters = {

  isAutnenticated: state => state.isAutnenticated,

  user: state => state.user

}

const mutations = {

  [types.SET_IS_AUTNENTIATED](state, isAutnenticated) {

    if (isAutnenticated)

      state.isAutnenticated = isAutnenticated

    else

      state.isAutnenticated = false

  },

  [types.SET_USER](state, user) {

    if (user)

      state.user = user

    else

      state.user = {}

  }

}

const actions = {

  setIsAutnenticated: ({ commit }, isAutnenticated) => {

    commit(types.SET_IS_AUTNENTIATED, isAutnenticated)

  },

  setUser: ({ commit }, user) => {

    commit(types.SET_USER, user)

  },

  clearCurrentState: ({ commit }) => {

    commit(types.SET_IS_AUTNENTIATED, false)

    commit(types.SET_USER, null)

  }

}

export default new Vuex.Store({

  state,

  getters,

  mutations,

  actions

})

巴特西

Vue elelment登录验证简单版

http.js

router.js

app.vue

views/login.vue

store.js

最新文章

热门文章

巴特西

Vue elelment登录验证 简单版

http.js

router.js

app.vue

views/login.vue

store.js

最新文章

热门文章

Vue elelment登录验证简单版