vue前端开发中登录相关业务逻辑总结

登录标志为token

1、登录token来源
a、外面参数传递进来，多系统联动做免登录
要注意：当从链接上获取这个参数时，在已登录的情况下是否需要每次都重置
要注意：链接上的token参数过多，有多个，vue中token对应一个数组，取数组最后一个元素

b、微信公众号 静默登录通过openid获取token登录
微信小程序手机号登录 手机号换token
手机号+验证码 登录

2、退出登录，清空登录状态
注意：openid和手机号解绑 ，方便公众号h5在同一个微信里要登录不同的用户

3、哪些页面需要登录才能查看， 哪些页面不登录可查看
注意：进入中间页面 未登录如何处理
a、跳转登录后，再返回； b、回到首页(或不需要登录的页面)

4、http请求返回 登录状态过期，如何处理
清空缓存状态，过期跳转去登录 登录后再继续原来的操作页面

5、登录状态一般在路由拦截里进行校验，登录信息要全局存储，作为全局状态，要保证缓存与内存里的状态一直。

全局存储登录状态 参考代码

 import { OpenIdCache, TokenCache } from '../utils/cacheOpt';
let _token = '';
let _openId = '';
const store = {
  user: {},
  isLogin () {
    const { openId, token } = this.getLoginFlat();
    return Boolean(openId && token);
  },
  /**
   * 获得登录凭证
   * @returns
   */
  getLoginFlat () {
    if (!_token) {
      _token = TokenCache.getValue();
    }

    if (!_openId) {
      _openId = OpenIdCache.getValue();
    }

    return { token: _token, openId: _openId };
  }
};

const Muations = {

  /**
   * 设置登录凭证
   * @param {*} param0
   */
  setLoginFlat ({ token, openId }) {
    _token = token;
    _openId = openId;
    OpenIdCache.setValue(openId);
    TokenCache.setValue(token);
   
  }
};

export { Muations };
export default store;