JeecgBoot Vue3 版本前端后端设置免登录-不登录直接访问页面-前端免登录直接访问

这篇具有很好参考价值的文章主要介绍了JeecgBoot Vue3 版本前端后端设置免登录-不登录直接访问页面-前端免登录直接访问。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

jeecgboot Vue3 版本做出了巨大的更新,前端项目的变动最大,在使用的时候官网文档有的地方没有介绍,如果您想做官网,前台的项目,这个时候需要绕过登录,直接进入项目,这个时候需要一下的配置,即可实现对应的功能。

在学习编程的时候不光要和老师,教程一一的学习,学习一些开源项目也很重要

一、前端设置免登录

1、创建页面

随便找个地方创建一个新页面
前端取消必须登录之后才能访问,Vue,TypeScript,前端,vue.js,javascript


<template>

  <div style="height: 500px;width: 500px;font-size: 100px">

      我的页面

  </div>
</template>
<script lang="ts" setup>

</script>

2、设置路由

将对应的页面添加到访问的路由当中在,src/router/routes/index.ts
前端取消必须登录之后才能访问,Vue,TypeScript,前端,vue.js,javascript

export const LoginIndexRoute: AppRouteRecordRaw = {
  path: '/MyIndex',
  name: 'MyIndex',
  component: () => import('/@/views/sys/login/MyIndex.vue'),
  meta: {
    title: t('我的页面'),
  },
};

在下面的添加刚刚的路由
前端取消必须登录之后才能访问,Vue,TypeScript,前端,vue.js,javascript

export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute,LoginIndexRoute];

3、设置白名单

将访问地址添加到对应的白名单里面
前端取消必须登录之后才能访问,Vue,TypeScript,前端,vue.js,javascript


MY_INDEX = '/MyIndex',

4、设置白名单生效

在src/router/guard/paramMenuGuard.ts设置白名单生效

前端取消必须登录之后才能访问,Vue,TypeScript,前端,vue.js,javascript

const MY_INDEX = PageEnum.MY_INDEX;

const whitePathList: PageEnum[] = [LOGIN_PATH, OAUTH2_LOGIN_PAGE_PATH,MY_INDEX];

二、后端设置免登录

当前端项目部进过登录直接访问的时候,这个时候页面的在调用接口数据的时候,需要设置对应的接口开放,设置配置不会被拦截的链接

前端取消必须登录之后才能访问,Vue,TypeScript,前端,vue.js,javascript文章来源地址https://www.toymoban.com/news/detail-684917.html

到了这里,关于JeecgBoot Vue3 版本前端后端设置免登录-不登录直接访问页面-前端免登录直接访问的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+elementPlus登录向后端服务器发起数据请求Ajax

    后端的url登录接口 先修改main.js文件 login.vue 此时前端有跨域问题 先配置跨域 vue.config.js  项目中如果没有这个文件 请自行创建。 此时可以看到跳转到登录到home页面  完整的后端登录方法  消息提示使用elementPlus 的Elmessage 

    2024年01月18日
    浏览(43)
  • 部署若依前端vue3后端SSM项目实战

    前端部署在nginx 后端部署在tomcat 系统 前端服务器 后端服务器 前端项目架构 后端项目架构 win10 nginx1.22.1 tomcat9 vue3 ssm linux 亲测! 环境同样适用。 前端项目修改项目下载地址 GIThub RuoYi-Vue3 vite.config.js 基本不用动, 默认打包为文件夹名 dist , 不用dist可以自定义(我用的自定义) 前

    2024年04月09日
    浏览(41)
  • 纯前端使用Vue3上传文件到minio文件服务器,粘贴直接可用

    1、首先安装minio的插件,因为我使用的vue3,不支持模块化的导入,所以我们使用一个别人写好的vue2的包 2、在需要上传文件的页面导入这个包 3、创建一个minio的客户端 这里说明一下,accessKey、secretKey、sessionToken都是通过接口获取到的 临时凭证 4、 通过带预签名的url上传,首

    2024年04月11日
    浏览(43)
  • 【WebSocket项目实战】聊天室(前端vue3、后端spring框架)

    最近我学习了WebSocket,为了更好地掌握这一技术,我决定通过做一个项目来巩固学习成果。在这个项目中,我将使用JavaScript和WebSocket来实现实时通信,让客户端和服务器端能够实时地传递和接收数据。通过这个项目,我希望能够更深入地了解WebSocket的工作原理,并且能够在实

    2024年02月04日
    浏览(51)
  • websocket 实现后端主动前端推送数据、及时通讯(vue3 + springboot)

    WebSocket 是一种全双工通信协议,用于在 Web 浏览器和服务器之间建立持久的连接。 WebSocket 协议由 IETF 定为标准,WebSocket API 由 W3C 定为标准。 一旦 Web 客户端与服务器建立连接,之后的全部数据通信都通过这个连接进行。 可以互相发送 JSON、XML、HTML 或图片等任意格式的数据

    2024年03月17日
    浏览(51)
  • 后端“fastapi”+前端“vue3+ts+ElementPlus”上传文件到uploads目录

    确保已安装好python3和fastapi mail.py 运行fastapi服务器 使用浏览器访问 http://127.0.0.1:8000/http://127.0.0.1:8000/docs 确保已安装node.js和yarn 使用vite初始化前端目录  安装element-plus main.ts中导入element-plus  修改vite.config.ts配置“CORS 跨域” 修改App.vue 运行 使用浏览器访问 http://127.0.0.1:70

    2024年02月22日
    浏览(52)
  • 菜鸟级:Vue Element-UI 前端 + Flask 后端 的登录页面验证码

    这里记录登录页面验证码的做法,采取的是前后端分离的做法,前端用Vue,后端用Flask 首先是GIF效果图: 后端返回的数据结构(base64字符串,response.data.img):   1、Vue前端页面基本采用Ruoyi Ui里面的登录页面代码,里面的一些方法进行重写; 首先是单个vue文件里网页内容

    2023年04月08日
    浏览(58)
  • 【vue导入导出Excel】vue简单实现导出和导入复杂表头excel表格功能【纯前端版本和配合后端版本】

    前言 这是一个常用的功能,就是导入和导出excel表格 但是时常会遇到一些复杂表头的表格导出和导入 比如我这个案例里面的三层表头的表格。 网上看了下发现了一个非常简单导出和导入方法 当然这个是纯前端的版本,会出现分页不好下载的情况。所以实际工作中,导出还是

    2024年02月11日
    浏览(63)
  • 前端vue后端go如何进行跨域设置?一篇就通透理解

    跨域 (Cross-Origin)指的是在 浏览器 中,当一个 web 应用程序试图访问 不同域名、不同端口或不同协议的资源时,就会发生跨域请求 ,此时浏览器的 同源策略 (Same-Origin Policy)就会进行拦截,他是同源策略是一种 安全机制 ,它限制了网页中的 JavaScript 代码只能访问同源(

    2024年04月12日
    浏览(47)
  • 百度语音识别(语音转文字)vue版本 前端(后端需要做个请求转发即可)

    这个项目需要用到语音识别,最后选择的是百度语音识别。原因第一是项目中用到的地方不大,属于微型和小型功能点,第二就是属于临时增加的需求,没有太多的时间去开发,第三就是后端对于自主开发语音识别觉得较为困难,浪费时间。 加载语音识别的文件 下载recorde

    2024年02月12日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包