vue项目中的登录流程总结

2018-12-24

简单总结一下vue中的登录流程

思路：

access_token: 用户token, 有效期一天
refresh_token: 刷新token, 有效期30天

每次打开APP时候判断本地是否存在token,如果有切有效，则跳过登录，直接进入主页，否则跳转至登录页面，用户输入账号密码后，
利用vueRouter在路由变化时进行验证

local.js

定义读取，设置localStorage的方法

const local = {
  get: (key) => { // 读取本地缓存
    let info = localStorage.getItem(key)
    if (info) {
      try {
        info = JSON.parse(info)
      } catch (e) { }
    }
    if (info && typeof info === 'object') {
      return info
    }
    return false
  },
  set: (key, info) => { // 储存信息
    return localStorage.setItem(key, JSON.stringify(info))
  },
  remove: (key) => { // 删除
    return localStorage.removeItem(key)
  }
}

export default local

permission.js

利用vueRouter,在页面跳转时候进行判断，判断该账号是否为合法账号（拥有合法的token）

import router from '@/router'
import store from '@/store'

const whiteList = ['/login', '/register', '/forget'] // 不重定向白名单
router.beforeEach((to, from, next) => {
  NProgress.start()
  if (store.getters.token.access_token) {
    // 本地存储的有token信息，可直接登陆
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      // 刷新token, 拉取最新用户信息  执行场景：1.刷新页面 2.每次自动登陆
      if (JSON.stringify(store.getters.user) === '{}') {
        store.dispatch('RefreshToken', store.getters.token.refresh_token).then(() => { // 刷新token
          store.dispatch('GetInfo').then(() => { // 更新用户信息
            next()
          }).catch(() => {
            store.dispatch('LogOut').then(() => { // 退出，返回登录界面
              next({ path: '/login' })
            })
          })
        }).catch(() => {
          store.dispatch('LogOut').then(() => {
            next({ path: '/login' })
          })
        })
      } else {
        next()
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) { // 白名单中的页面不做验证
      next()
    } else {
      next({ path: '/login' })
      NProgress.done()
    }
  }
})

store的action中定义相关方法

import { requestLoginApi, getSelfApi, refreshTokenApi } from '@/service/api/login'

import local from '@/assets/utils/local'
export const Login = ({ commit, state }, userInfo) => { // 登录
  var username = userInfo.account.trim()
  var checkPass = userInfo.checkPass.trim()
  var loginData = {
    username: username,
    password: checkPass,
    clientType: 'APP',
    pid: state.pid
  }
  return new Promise((resolve, reject) => {
    requestLoginApi(loginData).then(rsp => {
      const respToken = {
        access_token: rsp.access_token,
        refresh_token: rsp.refresh_token
      }
      local.set(state.key.token, respToken)
      commit('SET_TOKEN', respToken) // 登录成功后，本地储存token信息
      resolve()
    }).catch(error => {
      reject(error)
    })
  })
}

export const RefreshToken = ({ commit, state }, token) => { // 刷新token
  return new Promise((resolve, reject) => {
    refreshTokenApi({
      refresh_token: token
    }).then(rsp => {
      const respToken = {
        access_token: rsp.access_token,
        refresh_token: rsp.refresh_token
      }
      local.set(state.key.token, respToken)
      commit('SET_TOKEN', respToken)
      resolve()
    }).catch(error => {
      reject(error)
    })
  })
}

export const GetInfo = ({ commit, state }) => { // 接口请求用户信息
  return new Promise((resolve, reject) => {
    getSelfApi().then(rsp => {
      commit('SET_USER', rsp) // 用户信息储存本地
      resolve()
    }).catch(error => {
      reject(error)
    })
  })
}