登录页面调用实现登录功能

1、在api下已经定义过login.js接口

2、在pages下创建login.vue登录页面（后面填充）

3、登录准备

（1）安装插件。

html 复制代码

npm install js-cookie

（2）修改layouts/default.vue页面登录入口。

html 复制代码

<a href="/login" title="登录">
                <em class="icon18 login-icon">&nbsp;</em>
                <span class="vam ml5">登录</span>
              </a>

（3）在register.vue页面js方法中实现注册成功后的跳转。

4、实现前端对接

（1）login.vue页面元素。

html 复制代码

<template>
  <div class="main">
    <div class="title">
      <a class="active" href="/login">登录</a>
      <span>·</span>
      <a href="/register">注册</a>
    </div>
    <div class="sign-up-container">
      <el-form ref="userForm" :model="user">

        <el-form-item class="input-prepend restyle" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
          <div >
            <el-input type="text" placeholder="手机号" v-model="user.mobile"/>
            <i class="iconfont icon-phone" />
          </div>
        </el-form-item>

        <el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <div>
            <el-input type="password" placeholder="密码" v-model="user.password"/>
            <i class="iconfont icon-password"/>
          </div>
        </el-form-item>
        <div class="btn">
          <input type="button" class="sign-in-button" value="登录" @click="submitLogin()">
        </div>
      </el-form>
      <!-- 更多登录方式 -->
      <div class="more-sign">
        <h6>社交帐号登录</h6>
        <ul>
          <li><a id="weixin" class="weixin" target="_blank" href="http://qy.free.idcfengye.com/api/ucenter/weixinLogin/login"><i class="iconfont icon-weixin"/></a></li>
          <li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import '~/assets/css/sign.css'
import '~/assets/css/iconfont.css'

export default {    
}
</script>

（2）login.vue页面的js实现。

html 复制代码

<script>
import "~/assets/css/sign.css";
import "~/assets/css/iconfont.css";
import cookie from "js-cookie";
import loginApi from "@/api/login";
export default {
  layout: "sign",
  data() {
    return {
      user: {
        mobile: "",
        password: ""
      },
      loginInfo: {}
    };
  },
  created() {},
  methods: {
    submitLogin() {
      loginApi.loginUser(this.user).then(response => {
        if (response.data.success) {
          //提示成功
          this.$message({
            type: "success",
            message: "登录成功!"
          });
          //把token字符串存入cookie
            cookie.set('guli_token', response.data.data.token, { domain: 'localhost' })
            //根据token获得用户信息
            loginApi.getInfoToken().then(response=>{
                this.loginInfo = response.data.data.member
                //把用户信息存入cookie
                cookie.set('guli_ucenter',this.loginInfo, { domain: 'localhost' })
            })
          //跳转页面
           window.location.href = "/";
        }else{
            //提示错误
           this.$message({
            type: "error",
            message: response.data.message
          }); 
        }
      });
    },
    checkPhone (rule, value, callback) {
        //debugger
        if (!(/^1[34578]\d{9}$/.test(value))) {
          return callback(new Error('手机号码格式不正确'))
        }
        return callback()
      }
  }
};
</script>
<style>
   .el-form-item__error{
    z-index: 9999999;
  }
</style>

5、在工具utils/request.js中新增拦截器

html 复制代码

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import cookie from 'js-cookie'
// 创建axios实例
const service = axios.create({
   //baseURL: 'http://qy.free.idcfengye.com/api', // api 的 base_url
  //baseURL: 'http://localhost:8210', // api 的 base_url
  baseURL: 'http://localhost:9001',//nginx
  timeout: 15000 // 请求超时时间
  
})

// http request 拦截器
service.interceptors.request.use(
  config => {
  //debugger
  if (cookie.get('guli_token')) {
    config.headers['token'] = cookie.get('guli_token');
  }
    return config
  },
  err => {
  return Promise.reject(err);
})
// http response 拦截器
service.interceptors.response.use(
  response => {
    //debugger
    if (response.data.code == 28004) {
        console.log("response.data.resultCode是28004")
        // 返回 错误代码-1 清除ticket信息并跳转到登录页面
        //debugger
        window.location.href="/login"
        return
    }else{
      if (response.data.code !== 20000) {
        //25000：订单支付中，不做任何提示
        if(response.data.code != 25000) {
          Message({
            message: response.data.message || 'error',
            type: 'error',
            duration: 5 * 1000
          })
        }
      } else {
        return response;
      }
    }
  },
  error => {
    return Promise.reject(error.response)   // 返回接口返回的错误信息
});

export default service

6、layouts/default.vue页面展示登录后的用户信息

（1）在default.vue页面添加元素。

html 复制代码

<!-- / nav -->
          <ul class="h-r-login">
            <li v-if="!loginInfo.id" id="no-login">
              <a href="/login" title="登录">
                <em class="icon18 login-icon">&nbsp;</em>
                <span class="vam ml5">登录</span>
              </a>
              |
              <a href="/register" title="注册">
                <span class="vam ml5">注册</span>
              </a>
            </li>
            <li v-if="loginInfo.id" id="is-login-one" class="mr10">
              <a id="headerMsgCountId" href="#" title="消息">
                <em class="icon18 news-icon">&nbsp;</em>
              </a>
              <q class="red-point" style="display: none">&nbsp;</q>
            </li>
            <li v-if="loginInfo.id" id="is-login-two" class="h-r-user">
              <a href="/ucenter" title>
                <img :src="loginInfo.avatar" width="30" height="30" class="vam picImg" alt>
                <span id="userName" class="vam disIb">{{ loginInfo.nickname }}</span>
              </a>
              <a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
            </li>
            <!-- /未登录显示第1 li；登录后显示第2，3 li -->
          </ul>

（2）default.vue页面的js实现。

html 复制代码

<script>
import "~/assets/css/reset.css";
import "~/assets/css/theme.css";
import "~/assets/css/global.css";
import "~/assets/css/web.css";
import cookie from 'js-cookie'
import userApi from '@/api/login'

export default {
  data () {
    return {
      token: '',
      loginInfo: {
        id: '',
        age: '',
        avatar: '',
        mobile: '',
        nickname: '',
        sex: ''
      }
    }
  },
  created () {
    this.showInfo()
  },
  methods: {
    showInfo(){
      let jsonStr = cookie.get("guli_ucenter")
      console.log(" jsonStr ="+jsonStr)
      if(jsonStr){
        this.loginInfo = JSON.parse(jsonStr)
      }
    },
    logout(){
      cookie.set('guli_token',"", { domain: 'localhost' })
      cookie.set('guli_ucenter',"", { domain: 'localhost' })
      //跳转页面
      window.location.href = "/";
    }

  }
};
</script>