登录本身是比较容易做的，无非是用户输入账号密码，然后提交给后台，是否验证通过，由于前后台分离，且不想再用session和cookie机制，我们需要模拟cookie机制，这里我们可以使用access_token

• 用户提交账号密码登录后，后台返回一个access_token及过期时间expires；后台则将这个access_token、expires_tiem 和uid等信息存储起来（数据库或者redis等），模拟cookie机制

• 用户端接收到access_token后，存储到Local Storage 中

• 后续发起网络请求时，将access_token写入url或者请求header中

此外还希望实现记住密码功能，我是这样做的，用户登录时候，将账户存储在LocalStorage中，在进入登录页面时，提取出来，填充进登录表单中

部分代码：

登录代码

import config from '../../utils/config/config'
import api from '../../utils/config/api'
import network from '../../utils/base/network'
import authorize from "../../utils/base/authorize";
import {md5} from "../../utils/lib/md5";

methods:{
  login:function () {

    this.$refs.loginBtn.showLoading()   //登录按钮显示登录中...

   
    if(this.form.rememberme){
      //如果勾选了记住密码，则保存密码 
      authorize.saveAccount(this.form.username,this.form.password)
    }else {
      //否则，清除存储的密码
      authorize.clearAccount()
    }

    //将密码md5加密后再传输
    let post_data={
      username:this.form.username,
      password:md5(this.form.password)
    }

    //发起登录的网络请求
    network.post(api.login,post_data).then(res=>{

      //保存token
      authorize.saveToken(res.token,res.expires)

      //根据进入登录页面的redirect和go信息，进行跳转
      if(typeof(this.$route.query.redirect)!="undefined"){
        this.$router.push(this.$route.query.redirect)
      }else if(typeof(this.$route.query.go)!="undefined"){
        this.$router.go(this.$route.query.go)
      }else {
        this.$router.push(config.index_path)
      }

      this.$refs.loginBtn.hideLoading()

    }).catch(err=>{
      console.log(err)
      this.$toast({
        title:err,
        type:'error'
      })

      this.$refs.loginBtn.hideLoading()
    })


  }
}

其中authorize代码

//关于授权登录等基础方法
import config from '../config/config'
/*
* 保存登录信息至本地缓存
*/
function saveToken(token,expires) {
  localStorage.token=JSON.stringify({
    token:token,
    expires: expires*1000  //js的时间是毫秒，php的是秒，所以乘以1000
  })
}

function getToken() {
  if(localStorage.token){
    let token=JSON.parse(localStorage.token)

    if(token.expires < Date.parse(new Date())){
      return false
    }

    return token.token
  }else{
    return false
  }
}

function clearToken() {
  localStorage.removeItem("token")
}

function checkLogin() {
  if(getToken()){
    return true
  }else{
    return false
  }
}

function saveAccount(username,password) {
  localStorage.setItem('account',JSON.stringify({
    username:username,
    password: password
  }))
}

function getAccount() {
  if(localStorage.account){
    return JSON.parse(localStorage.account)
  }else {
    return false
  }
}

function clearAccount() {
  localStorage.removeItem("account")
}

export default {
  saveToken,
  getToken,
  clearToken,
  checkLogin,
  saveAccount,
  getAccount,
  clearAccount
}