芋道前后端分离项目跳过登录

news2024/11/18 7:49:46

后端接口

1. nacos配置

 

根据以上两图可以发现芋道的跳过登录配置在nacos或者yml可以配置成如下样式

将所有需要跳过登录的方法写在permit-all_urls下级即可

2. @PermitAll注解:不管登入,不登入 都能访问

注:如果一个页面有多个接口那么所有接口均需要写上此注解,否则会提示登录状态过期

前端

1. src/router/indes.js

在此路径下配置需要跳过登录的页面路径,记住path中编辑的名称

2. src/permission.js

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getAccessToken } from '@/utils/auth'
import { isRelogin } from '@/utils/request'

NProgress.configure({ showSpinner: false })

// 增加三方登陆 update by 芋艿
const whiteList = ['/login', '/social-login',  '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee', '/loaginLevel', '/level']
router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getAccessToken()) {
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        isRelogin.show = true
        // 获取字典数据 add by 芋艿
        store.dispatch('dict/loadDictDatas')
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(() => {
          isRelogin.show = false
          store.dispatch('GenerateRoutes').then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
          store.dispatch('LogOut').then(() => {
            Message.error(err)
            next({ path: '/' })
          })
        })
      } else {
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单,直接进入
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})

在此页面中可以看到当在没有获取到token时,如果此页面在白名单中则直接进入,所以我们将刚刚配置在 src/router/indes.js中的path写入whiteList即可

至此完成免登录进入页面

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1139787.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【算法-数组1】二分查找 和 移除元素

今天,带来XXX的讲解。文中不足错漏之处望请斧正! 理论基础 二分查找 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标&#…

AMEYA360:炬玄智能车规级RTC芯片JXR191T为车载BMS提供16年稳态输出

北京炬玄智能科技有限公司聚焦于集成电路时钟芯片研发及生产,以高精度、高稳定性、集成化芯片和系统设计为主要方向,以实时时钟芯片(RTC)及模组为切入点,逐步将产品拓展到以TCXO、OCXO为代表的高端晶振芯片领域,最终打通整个时钟产…

探讨Java多线程调度:如何实现两线程并行,一线程等待?

亲爱的小伙伴们,大家好!我是小米,很高兴再次和大家分享一些关于Java编程的有趣技巧和知识。今天,我们将探讨一个有趣且常见的面试问题:如何让两个线程同时执行,而第三个线程必须等待前两个线程结束后才能开…

trucksim常见问题

一、Error: Unable to load .vs data from “D:\Users\Public\Documents\TruckSim2019.0 Data\Results\Run_e24aa2… LastRun.vs”.Reason for failure: Invalid character OxFFFFFFB2 in string"" on line 4.Would you like to continue receiving alerts of this t…

RPA厂商大比拼,哪家才更适合您?

引言:随着数字化时代的到来,自动化已成为推动企业数字化发展的关键举措之一,RPA作为自动化中的重要技术之一,可为企业提供了实现业务流程自动化的强大工具。然而,如何选择适合自己的RPA厂商也是各大企业现在面临的难题…

调试-Debug

0.1 Debug环境介绍 Microsoft Visual Studio 2022中: Debug版本的可执行程序称为调试版本,包含调试信息,不作任何优化,便于程序员进行调试。 Release版本的可执行程序称为发布版本,进行了各种优化,不可调…

小红书内容运营包含哪些,内容种草攻略

在这个社交属性,强势泛滥的年代,兼具了社交和电商两大功能的小红书,已经成为品牌方的兵家必争之地。今天来为大家分享下小红书内容运营包含哪些,内容种草攻略! 1、确定账号定位 这是做好小红书内容运营的第一步。一个有…

扫地机器人,不相信视觉导航

不可置否,激光雷达已经成为扫地机器人的“耶路撒冷”。 导航技术的从无到有 回顾扫地机器人的兴衰,本质是导航技术的从无到有、从弱到强、从少到多,而在这个过程中,激光雷达无疑发挥了无可替代的作用。2010年,第一台…

实时嵌入式系统环境中敏捷的基础

不同的人使用敏捷一词的含义不同。在计算中,该术语最初用于描述执行项目开发的轻量级方法,而最初的术语极限编程(XP)未能激发受托管理开发项目的众多管理人员。 基本上,敏捷软件开发指的是一组松散集成的原则和实践&a…

Vue echarts 折线图 背景颜色渐变 (两种实现方式)

需求 实现方式 两种方法 方法一:color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{},{},{}]) 方法二:避开new echarts,color: {x: 0, y: 0, x2: 0, y2: 1,colorStops: [{},{},{}]} …

【嵌入式】HC32F07X DAC模拟输出 + DMA传输

一 背景说明 使用小华(华大)的MCU HC32F07X实现两个通道的 0-5V 电压模拟输出。 二 原理分析 【1】DAC原理说明: 所谓DAC,就是Digital-Analog-Converter,数字模拟转换器。在模拟电路中,电流电压变化是连续…

漏洞复现-dedecms文件上传(CVE-2019-8933)

dedecms文件上传_CVE-2019-8933 漏洞信息 Desdev DedeCMS 5.7SP2版本中存在安全漏洞CVE-2019-8933文件上传漏洞 描述 ​ Desdev DedeCMS(织梦内容管理系统)是中国卓卓网络(Desdev)公司的一套基于PHP的开源内容管理系统&#x…

WebSocket 原理揭秘:让你彻底搞懂 Websocket 原理

WebSocket 的原理 WebSocket 是什么? WebSocket 是一种新型的协议,它可以在客户端和服务器之间建立长连接,实现双向通信。在传统的 HTTP 协议中,当客户端向服务器发送请求后,服务器会返回响应,然后连接就…

创建python虚拟环境

为什么要创建python虚拟环境? 在python开发中,我们可能会遇到一种情况,就是当前的项目依赖的是某一个版本,但是另一个项目依赖的是另一个版本,这样就会造成依赖冲突,在不同的环境中进行不同需求的项目开发…

ChinaSoft 论坛巡礼 | 智慧化 IDE 论坛

2023年CCF中国软件大会(CCF ChinaSoft 2023)由CCF主办,CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办,将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…

华为OD机考算法题:矩阵最大值

题目部分 题目矩阵最大值难度难题目说明给定一个仅包含 0 和 1 的 N*N 二维矩阵,请计算二维矩阵的最大值,计算规则如下: 1. 每行元素按下标顺序组成一个二进制数(下标越大越排在低位),二进制数的值就是该行…

怎样下载视频号视频?分享6种有效方法

在今天的数字时代,视频号视频成为了人们生活中不可或缺的一部分。有时候,我们看到了一段精彩的视频,希望能够保存下来欣赏或分享给朋友,却因为平台限制而困难重重。为了帮助你实现这个目标,本文将介绍几种简单而有效的…

【JAVA基础】多线程与线程池

多线程与线程池 文章目录 多线程与线程池1. 相关概念1.1 线程调度1.2 守护线程 2. 生命周期3. 同步机制/同步锁3.1 synchronized3.2 lock3.3 synchronized 与 Lock 的对比 4. 死锁5. 线程通信5.1 线程间的通信5.2 等待唤醒机制5.3 举例5.4 调用 wait 和 notify 需注意的细节5.5…

docker应用部署---MySQL的部署配置

docker应用部署---MySQL的部署配置 1. 搜索mysql镜像2. 拉取mysql镜像3. 创建容器,设置端口映射、目录映射4. 进入容器,操作mysql5. 登录mysql6. 使用外部机器连接容器中的mysql 1. 搜索mysql镜像 docker search mysql2. 拉取mysql镜像 #安装5.6版本的M…

<script> 标签的 defer 和 asnyc 属性的作用以及二者的区别

前言 在现代Web开发中,JavaScript的使用几乎是不可避免的。随着Web应用变得越来越复杂,JavaScript文件的大小也在不断增长。为了提高页面加载性能,浏览器提供了async和defer两个属性,用于改变浏览器加载和执行JavaScript文件的方…