若依及vue-element-admin vue 管理系统第三方

诺依后台管理系统官网：https://doc.ruoyi.vip/ruoyi-vue/

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

> 以下是html部分代码片断
<div class="login-pdd" v-if='pdd'>
<img src="../assets/image/pddlog.png">
<p>拼多多账号授权登录</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
         }
      });
    },
}
- 跳转到第三方登录页面，授权，后端处理为 ，跳转一个带token的页面。第一步的难点，这个后端跳转的界面是跳那个界面。这时候不能直接跳转到index.html。因为index.html是需要token的，我们先要拿到token,然后存token再去跳转到首页。这样第三方登录就完成了。跳转到一个空页面，然后存token。这里不能让后端跳转到login页面，因为login页面是不需要token的，会报403错误再跳首页。

> 以下是空页面的代码，auth-redirect.vue
- this.$route.query获取路由的token,去vux里在存token，然后再跳转到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
    },
}

> 以下是发起拼多多登录请求
// 拼多多
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),
  }
]
},


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