Axios | 登录实现

验证码登录流程

1. 输入手机号，点击发送验证码
2. 携带手机号，调用服务器发送短信验证码接口
3. 后台为此手机号生成验证码，记录生成时间，并存在服务器
4. 后台携带手机号，验证码调用运营商接口
5. 运营商通过基站给指定手机号发送验证码短信（基站是单链接，即只负责发短信）
6. 运营商给服务器给到发送成功的结果
7. 后台告诉前端返回验证码发送成功
8. 最后走普通登录实现流程即可实现

实现过程

1. 在utils/request.js配置axios请求基地址
2. 收集手机号和验证码数据
3. 基于axios调用验证码登录接口
4. 使用Bootstrap的Alert警告框反馈给用户

具体实现

页面的基本处理

请求基地址

axios.default.baseURL = '//基地址'

给登录按钮绑定点击事件（此处用js实现，可换vue),用serialize()获取表单，form中每个元素都应有name属性

document.querySelector('.btn').addEventListener('click', () => {
  const form = document.querySelector('.login-form')
  const data = serialize(form, {hash: true, empty: true})
  //紧接着用axios提交数据，在接口文档中找后端提供的地址
  axios({
    url:'//后端地址',
    method: 'POST',
    data
    //用.then接收成功的结果，.catch接收失败的结果
  }).then(result => {
      console.log(result)
  }).catch(error => {
      console.dir(error.response.data.message)
  })
})

在Index.html中写警告框Boostrap，因为会经常用到，所以直接在utils中封装alert.js

@param {*} isSuccess //成功true,失败false
@param {*} msg //提示信息

function myAlert(isSuccess,msg) {
  const myAlert = document.querySeletor('.alert')
  myAlert.classList.add(isSuccess ? 'alert-success' : 'alert-danger')
  myAlert.innerHTML = msg
  myAlert.classList.add('show')

  setTimeout( () => {
    myAlert.classList.remove(isSuccess ? 'alert-success' : 'alert-danger')
    myAlert.innerHTML = ''
    myAlert.classList.remove('show')
  },2000)
}

在index.html中引用即可使用

<script src = "../..utilss/alert.js"></script>

 

document.querySelector('.btn').addEventListener('click', () => {
  const form = document.querySelector('.login-form')
  const data = serialize(form, {hash: true, empty: true})
  //紧接着用axios提交数据，在接口文档中找后端提供的地址
  axios({
    url:'//后端地址',
    method: 'POST',
    data
    //用.then接收成功的结果，.catch接收失败的结果
  }).then(result => {
      myAlert(true,'登陆成功’)
  }).catch(error => {
      myAlert(catch, error.response.data.message)
})

token的使用

目标：只有登陆状态才可以访问页面

步骤：

 在utils/auth.js中判断无token令牌字符串，则强制跳转到首页

const token = localStorage.getItem('token')
if(!token) {
  location.herf = '..login/index.html'
}

 在登录成功后，保存token令牌字符串到本地，在跳转到首页

localStorage.setItem('token', result.data.data.token)
location.herf = '../content/index.html'

axios请求拦截器和响应拦截器

axios可在headers选项传递请求头参数

axios( {
  url: '目标资源地址',
  header: {
    Authorization； `Bearer ${localStorage.getItem('token')}`
  }
})

问题：很多接口都需要携带token令牌字符串

解决：在请求拦截器同意设置公共header选项，在发送请求前对请求参数进行额外配置（书写位置：utils/request.js)

axios.interceptors.request.use(function (config) {
  const token = location.getItem('token')
  token && config.headers.Authorization = `Bearer ${token}`
  return config
},function(error) {
  return Promis.reject(error)
})

在authentic.js中

axios( {
  url: '资源地址',
}).then(result => {
    const.username = result.data.data.name
    document.querySelector('.nick-name').innerHTML = username
})

响应拦截器

axios.intereptors.response.user(function(response) {
  return response
},function(error) {
    console.dir(error)
    if(error?.response?.status === 401) {
      alert('提示信息')
      localStorage.clear()
      location.herf = '../login/index.html'
    }
    return Promise.reject(error)
})

以上所有代码仅供模板参考