若依前后台分离vue项目放开前台页面拦截配置

帅气的小伙

已于 2024-01-22 14:48:07 修改

阅读量1.1k

点赞数 7

CC 4.0 BY-SA版权

文章标签：前端

于 2024-01-22 14:24:54 首次发布

本文链接：https://blog.youkuaiyun.com/goodboxs/article/details/124581655

本文介绍了如何在Vue前后端分离项目中，针对特定页面如单点登录页面，解除页面权限拦截。通过修改`ssologin.vue`组件和在`user.js`中添加SSO逻辑，利用Promise和API交互设置token，确保无权限用户可以直接访问并完成登录流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

若依前后台分离vue项目放开前台页面拦截配置

使用场景某些页面不需要权限就能直接访问的页面 , 例如做个单点登录之类的。这里只需要修改2处即可

ssologin.vue代码

<template>
</template>
<script>
export default {
  name: "SsoLogin",
  data() {
    return {
      redirect: undefined,
      userInfo: {
        username: "",
        uuid: "",
      },
      loading: false,
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {},
  created() {
    this.userInfo.uuid = this.$route.query.uuid;
    this.userInfo.username = this.$route.query.username;
    this.$store.dispatch("SsoLogin", this.userInfo).then(() => {
      this.loading = true;
      this.$router.push({path: this.redirect || "/"}).catch(() => {
      });
    }).catch(() => {
    });
  }
}
</script>

user.js添加了单点登录

import {login, logout, ssoLogin, getInfo} from '@/api/login'


    SsoLogin({commit}, userInfo) {
      return new Promise((resolve, reject) => {
        ssoLogin(userInfo.uuid, userInfo.username).then(res => {
          setToken(res.data.token)
          commit('SET_TOKEN', res.data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },