ruoyi 页面跳转_若依及vue-element-admin vue 管理系统第三方拼多多登录

请求后端接口，成功跳到第三方拼多多登录，后端返回带有token的链接

> 以下是html部分代码片断

拼多多账号授权登录

type="danger"

style="width:100%;"

@click.native="pddLogin"

>

登 录

> 事件

methods: {

// 拼多多登录

pddLogin(){

pddlogin().then(response => {

if(response.code===200){

window.location.href=response.msg

}

});

},

}

- 跳转到第三方登录页面，授权，后端处理为 ，跳转一个带token的页面。第一步的难点，这个后端跳转的界面是跳那个界面。这时候不能直接跳转到index.html。因为index.html是需要token的，我们先要拿到token,然后存token再去跳转到首页。这样第三方登录就完成了。跳转到一个空页面，然后存token。这里不能让后端跳转到login页面，因为login页面是不需要token的，会报403错误再跳首页。

> 以下是空页面的代码，auth-redirect.vue

- this.$route.query获取路由的token,去vux里在存token，然后再跳转到index.html

export default {

name: 'auth-redirect',

created() {

const query = this.$route.query

if (query) {

this.$store.dispatch('oauthLogin', query.token)

.then(() => {

this.$router.push({ path: '/' })

})

}

},

render: function(h) {

return h() // avoid warning message

}

}

> 以下是vux的代码

actions: {

//第三方登录存缓存

oauthLogin({ commit }, token) {

return new Promise((resolve, reject) => {

commit('SET_TOKEN', token)

setToken(token)

resolve()

})

},

},

mutations: {

SET_TOKEN: (state, token) => {

state.token = token

},

}

> 以下是发起拼多多登录请求

// 拼多多

export function pddlogin() {

return request({

url: '/pdd/login',

method: 'post'

})

}

> auth-redirect.vue要配置路由admin账号，第三方账号要去配置菜单和角色管理。不配的话。这个页面获取不到路由信息

{

path: '/auth-redirect',

component: Layout,

hidden: true,

children: [

{

path: '/auth-redirect',

component: (resolve) => require(['@/views/auth-redirect'], resolve),

}

]

},

整个第三方登录流程完成，账号绑定操作在后端。