諾依后臺管理系統(tǒng)官網(wǎng)：https://doc.ruoyi.vip/ruoyi-vue/

請求后端接口，成功跳到第三方拼多多登錄缨称，后端返回帶有token的鏈接

> 以下是html部分代碼片斷
<div class="login-pdd" v-if='pdd'>
<img src="../assets/image/pddlog.png">
<p>拼多多賬號授權(quán)登錄</p>
<el-row>
  <el-button
    type="danger"
    style="width:100%;"
    @click.native="pddLogin"
  >
    登 錄
  </el-button>
  </el-row>
</div>
> 事件
methods: {
 // 拼多多登錄
    pddLogin(){
       pddlogin().then(response => {
         if(response.code===200){
           window.location.href=response.msg
         }
      });
    },
}
- 跳轉(zhuǎn)到第三方登錄頁面讯沈，授權(quán)郁岩，后端處理為 ，跳轉(zhuǎn)一個帶token的頁面缺狠。第一步的難點问慎，這個后端跳轉(zhuǎn)的界面是跳那個界面。這時候不能直接跳轉(zhuǎn)到index.html儒老。因為index.html是需要token的蝴乔，我們先要拿到token,然后存token再去跳轉(zhuǎn)到首頁。這樣第三方登錄就完成了驮樊。跳轉(zhuǎn)到一個空頁面，然后存token片酝。這里不能讓后端跳轉(zhuǎn)到login頁面囚衔，因為login頁面是不需要token的，會報403錯誤再跳首頁雕沿。

> 以下是空頁面的代碼练湿，auth-redirect.vue
- this.$route.query獲取路由的token,去vux里在存token，然后再跳轉(zhuǎn)到index.html
<script>
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
  }
}
</script>

> 以下是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
    },
}

> 以下是發(fā)起拼多多登錄請求
// 拼多多
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),
  }
]
},


整個第三方登錄流程完成疾渣，賬號綁定操作在后端篡诽。