背景:在一些项目中,可能会需要打通两个平台之间的权限,即为用户在当前项目,想要通过某个button或者链接跳转到另一个项目(简称从A跳到B)的制定路由页面,那么根据一般情况,用户会被另一个项目阻拦在登陆页面,进行登陆,所以我们需要改一下B项目的登陆逻辑------通常来说:我们在登陆页面会通过点击button并携带账号密码给后端发请求,后端验证账号密码正确返回一个token,此时浏览器存入token就可以进入项目,由于此项目需要打通两个平台,所以我们可以将B项目的登陆逻辑这样处理:用户在从A项目的某个button或者链接跳转到B的时候,B进行路由的全局守卫进行拦截,此时前后端需要约定好逻辑,此项目逻辑如下:在用户点击A项目的某个button进行跳转的同时给后端发请求,若请求成功,后端会返回新项目的域名+参数(比如规定好是code值);例如:原先访问B项目的地址是http://11.222.3.44/#/login,而后端返回的url是:http://11.222.3.44/#/login?code=12345,此时需要在路由守卫里进行判断,如果有url中有code值即向后端发请求并传参(code值),这时若请求并后端验证成功,即可返回一个token,用户即可不用填写账号密码直接进入项目;ok!打通A---B项目!具体代码:

1、A项目跳转的button:

 

 2、B项目的路由守卫:

// 创建路由
const createRouter = () =>
  new Router({
    mode: 'history', // require service support
    scrollBehavior: () => ({
      y: 0
    }),
    // 将constantRoutes挂载到路由
    routes: constantRoutes
  })
const router = createRouter()
// 全局守卫
router.beforeEach(async (to, from, next) => {
  // 判断是否有token
  if (!store.state.user.token) {
    // 拿到参数值
    //  定义了一个函数,用来处理参数---一对象形式输出--后期做封装\
    // 拿到url--判断是否含有login
    // console.log(window.location.href.indexOf('login')!==-1)
    console.log('code', to.query.code)
    var url = location.search
    if (url.indexOf('?') > -1) {
      var result = {};
      var str = url.split('?')[1];
      var temp = str.split('&');
      for (var i = 0; i < temp.length; i++) {
        var temp2 = temp[i].split('=');
        result[temp2[0]] = temp2[1];
      }
      console.log('请求url参数', result)
    }

    if (result && to.query.code) {
      console.log('空', result)
      await store.dispatch("user/iwalogin", result)
      if (store.state.user.token) {
        if (to.path == "/login") {
          let nextPath = to.query.redirect && to.query.redirect != '/login' ? to.query.redirect : "/order-simulation/order-simulation";
          next(nextPath);
          return;
        } else {
          next();
          return;
        }

      } else {
        // this.$message.error('请求错误!')
        console.log('888')
      }
    }
    if (to.path != '/login') {
      next("/login?redirect=" + to.fullPath);
      return
    }
  }
  next()
})

3、B项目中登陆逻辑:获取token--存储token:

import {
  login,
  iwalogin
} from '@/api/user'
import {
  getToken,
  setToken,
  removeToken
} from '@/utils/auth'
import {
  NAME,
  USER_TYPE,
  USER_ID
} from '@/utils/mappingData'

export default {
  namespaced: true,
  state: {
    token: getToken(),
    name: sessionStorage.getItem(NAME),
    roles: JSON.parse(sessionStorage.getItem(USER_TYPE)) || [], // normal ?????? factory??????
    userId: sessionStorage.getItem(USER_ID)
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
      setToken(token)
    },
    SET_NAME: (state, name) => {
      sessionStorage.setItem(NAME, name)
      state.name = name
    },
    SET_USER_ID: (state, userId) => {
      sessionStorage.setItem(USER_ID, userId)
      state.userId = userId
    },
    SET_ROLES: (state, userType) => {
      let role
      if (userType === 0) {
        role = 'normal'
      } else {
        role = 'factory'
      }
      state.roles.splice(0, 1)
      state.roles.push(role)
      sessionStorage.setItem(USER_TYPE, JSON.stringify([role]))
    }
  },
  actions: {
    async login({
      dispatch,
      commit
    }, userinfo) {
      try {
        const {
          username,
          password
        } = userinfo
        const res = await login({
          username: username.trim(),
          password: password
        })
        if (res.code === 0) {
          commit('SET_USER_ID', res.data.user_id)
          commit('SET_NAME', res.data.user_name)
          commit('SET_TOKEN', res.data.token)
        }
        return res
      } catch (error) {
        console.log(error)
      }
    },
    async iwalogin({
      dispatch,
      commit
    }, code) {
      try {
        const res = await iwalogin(code)
        if (res.code === 0) {
          commit('SET_USER_ID', res.data.user_id)
          commit('SET_NAME', res.data.user_name)
          commit('SET_TOKEN', res.data.token)
        }
        return res
      } catch (error) {
        console.log(error)
      }
    },
    // remove token
    resetToken({
      commit
    }) {
      return new Promise(resolve => {
        removeToken()
        sessionStorage.clear()
        resolve()
      })
    }
  }
}

核心代码:

 ok!解决!****记录仅供自己总结下次参考!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐