案例--电商(简易版)逻辑分析

 1.查看是否登录 :  localStorage 内的 标识 ,只要不对,说明没登录

2.查看登录是否过期 : 发送请求,根据文档请求一个需要登录的接口

                按照根据接口文档,在请求头携带字段 把token携带过去验证

        能请求数据,说明状态没过期,

                根据后端返回的内容中的 code 判断 token 是否在有效期内

        不能请求回数据,代表状态过期了

---

Login

// 登录操作
const form = document.querySelector('form')
const nameInp = document.querySelector('.username')
const pwdInp = document.querySelector('.password')
const errBox = document.querySelector('.error')

// 1. 绑定事件
form.addEventListener('submit', e => {
  e = e || window.event
  try { e.preventDefault() } catch(err) { e.returnValue = false }

  // 2. 拿到用户输入的内容
  const name = nameInp.value
  const pwd = pwdInp.value

  // 3. 非空验证
  if (!name || !pwd) return window.alert('请完整填写表单')

  // 4. 发送请求
  const xhr = new XMLHttpRequest()

  xhr.open('POST', 'http://localhost:8888/users/login')

  xhr.onload = () => loginHandler(xhr)

  // POST 请求, 需要携带参数, 设置请求头
  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

  xhr.send(`username=${ name }&password=${ pwd }`)

})

// 登录的处理函数
function loginHandler(xhr) {
  // 接受后端的响应
  const res = JSON.parse(xhr.responseText)

  // 登录失败 让错误文本显示出来
  if (res.code === 0) {
    errBox.classList.add('active')
    return
  }

  // 登录成功
  // 我需要向 lcoalStorage 内存储一个数据, 表示我登录成功过
  window.localStorage.setItem('login', 1)
  // 把登录成功以后, 后端给我的 "凭证" 保存起来, 别的页面也需要使用呢
  window.localStorage.setItem('token', res.token)
  // 把当前用户的 id 存储起来
  window.localStorage.setItem('id', res.user.id)

  // 获取一下 localStorage 内的 url 字段, 如果有内容
  // 表示我是从某一个页面跳转过来的, 还回到这个页面
  // 如果没有这个字段, 就跳转到 index 页面
  const url = window.localStorage.getItem('url')
  window.localStorage.removeItem('url')

  // 跳转页面(暂时跳转到首页)
  window.location.href = `./${ url ? url : 'index' }.html`
}

index首页

// 根据你是否登录, 决定显示 div.on 还是显示 div.off

const onBox = document.querySelector('.on')
const offBox = document.querySelector('.off')
const nameBox = onBox.querySelector('.username')

const id = window.localStorage.getItem('id')

// 登录验证
testLogin()
function testLogin() {
  // 1. 怎么知道你是否登录过
  // 如果你的 localStorage 内有 login 信息, 并且值为 1, 表示你曾经登录过
  // 1-1. 获取到 localStorage 内的 login 信息
  const login = window.localStorage.getItem('login')
  if (login !== '1') {
    // 1-2. 证明你从来没有登录过
    offBox.classList.add('active')
    onBox.classList.remove('active')
    return
  }

  const token = window.localStorage.getItem('token')

  // 2. 你曾经登录过
  // 一天以前还是一个月以前, 不知道
  // 拿到 token 加密的 "凭证"
  // 利用这个 "凭证" 去请求一个需要 "凭证" 才能返回数据的接口
  // 因为本页面需要用到 用户的昵称, 所以就直接请求一个用户详细信息
  // 请求用户信息
  const xhr = new XMLHttpRequest()
  // 拿到 lcoalStorage 内的 id 信息
  xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)
  xhr.onload = () => testHandler(xhr)
  // 请求之前设置一下请求头, 添加 authoriztion 设置 token 信息
  xhr.setRequestHeader('authorization', token)
  xhr.send()
}

function testHandler(xhr) {
  const res = JSON.parse(xhr.responseText)
  console.log(res)

  // 判断 res 内的 code 来决定使用哪一个标签
  if (res.code !== 1) {
    offBox.classList.add('active')
    onBox.classList.remove('active')
    return
  }

  // 表示你当前在登录有效期内
  // 把用户昵称写进去
  nameBox.innerText = res.info.nickname
  onBox.classList.add('active')
  offBox.classList.remove('active')
}

// 跳转页面
const cartBtn = document.querySelector('.cart')
const logoutBtn = document.querySelector('.logout')
const selfBtn = document.querySelector('.self')
const listBtn = document.querySelector('.list')

cartBtn.addEventListener('click', () => window.location.href = './cart.html')
selfBtn.addEventListener('click', () => window.location.href = './self.html')
listBtn.addEventListener('click', () => window.location.href = './list.html')
logoutBtn.addEventListener('click', () => {
  // 发送请求告诉服务器, 我再注销登录
  ajax({
    url: 'http://localhost:8888/users/logout',
    data: `id=${ id }`,
    dataType: 'json',
    success: function (res) {
      if (res.code === 1) window.location.reload()
    }
  })
})

cart购物车

// 登录后才可以显示页面
// 如果没有登录, 或者登录过期, 直接跳转到 登录页

// 获取元素
const cartBox = document.querySelector('.cartBox')
const totalPriceBox = document.querySelector('.totalPrice')
const totalNum = document.querySelector('.totalNum')
const allSelect = document.querySelector('.allSelect')
const content = document.querySelector('.content')

const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')

testLogin()
function testLogin() {
  const login = window.localStorage.getItem('login')

  // 判断是否有 login
  if (login !== '1') {
    // 没有登录过
    // 当你从