背景:在一些项目中,可能会需要打通两个平台之间的权限,即为用户在当前项目,想要通过某个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!解决!****记录仅供自己总结下次参考!