登录联调示例详解

登录接口联调后跳转空白页， 没有跳转后端返回的地址？

登录流程

1.点击登录触发登录请求
2. 登录会根据URL变化 来判断当前用户是否登录

注： 登录成功后先挂载router、store 等到根节点， 不然刚进页面的时候 router 是不会加载， 会出现一些意外的问题。

// 登录的时候 获取用户信息
Vue.prototype.axios.get('').then(res => {
  const user = res.data;
  // 登录返回的用户信息

// 第一次登录的时候， 或者没有登录的时候会走这个方法的请求
// 通过dispatch 发起一个action 请求。方法名：saveUserInfo ， 参数：user 
  store.dispatch('saveUserInfo', { user }).then(() => {
    new Vue({
      router,
      store,
      render: h => h(App),
    }).$mount('#app');
  })
}).catch(res => {
  // 未登录处理
  console.log("res.data:",res)
  
  // 截取data返回根目录数据，和appk
  const redirectUrl = res.data.split('&redirectUrl')[0];
   // 获取登陆页面跳转前所在的地址， 避免后端返回错误地址 而跳转页面不受控制
  const local = encodeURIComponent(location.href); 
  console.log('url',`${redirectUrl}&redirectUrl=${local}`)
  // 如果用户未登录 真正页面索要跳转的是 登录页面的地址 + 登录成功后需要回调的地址
  location.href = `${redirectUrl}&redirectUrl=${local}`;
})

// store， 处理vuex 存储 登陆时的用户信息 到localStorage

Vue.use(Vuex);

const state = {
  set userInfo(val) {
    localStorage.setItem('userInfo', JSON.stringify(val));
  },
  get userInfo() {
    let userInfo = localStorage.getItem('userInfo');
    if(userInfo&&userInfo!="undefined"){
      return JSON.parse(localStorage.getItem('userInfo'));
    }
    return {};
  },
}

const mutations = {
  SET_USERINFO(state, data) {
    state.userInfo = data.user;
  },
}
const actions ={
  saveUserInfo ({ state, commit }, data) {
    return new Promise(resolve => {
      if (state.userInfo !== data) {
        localStorage.setItem('userInfo', JSON.stringify(data));
        commit('SET_USERINFO', data);
      }
      resolve(data);
    })
  }

}
export default new Vuex.Store({
  state,
  mutations,
  actions,
});

// 登录返回的数据

// 登录成功，返回data 获取用户信息
data: {
    userId: 123, userName: "", loginName: "", domainAccount: "", userType: 50,}
    email: ""
    userId: 000
    userName: "abc"
}

// 用户未登录时返回的数据

{
  "code":"user-not-login",
  "data":"http://abc.com/?appKey=abc&redirectUrl=http//+回调地址",
  "message":"用户未登录"
}
 // 返回 data 数据详解
1. http://passport-test.test.geely.com/?appKey=abc
 
2. &redirectUrl=http//+回调地址
  注： '&redirectUrl='  字段后面拼接的是 回调的地址

总结： 如果根URL判断用户未登录，则跳转返回的data链接， 其中&redirectUrl= 是登录成功后的回调地址