精华内容
下载资源
问答
  • redirect
    千次阅读
    2021-09-18 17:18:01

    在我们写后台管理系统中,常常涉及到角色菜单权限的控制。在有些父级目录中,我们会配置redirect属性,通常情况下,我们会指向当前路由子路由的第一个。但是如果没有配置当前路由第一个,这时候点击父级菜单,容易404,这个时候就需要我们动态配置redirect。

    首先:我们先写一个函数,把当前路由的子路由传递进去,然后limits为本地所有有权限的路由,这个函数会返回当前路由中子路路由的第一个有权限的路由

    export function redirectF(children){
        let limits=localStorage.getItem('limits')
        for(let i=0;i<children.length;i++){
            if(limits.includes(children[i].name)){
                return children[i].path
            }
        }
    }

    其次,我们在路由中就需要用到上面写的函数了,直接在redirect中写成函数的形式,直接调用该函数就可以了

    import {redirectF} from '@/utils/router'
    const children=[
        { path: '/map/limit',  icon: 'el-icon-picture', name: 'MapLimit', title: '测试1'},
        { path: '/map/source',  icon: 'el-icon-picture', name: 'MapSource', title: '测试2'},
        { path: '/map/weight',  icon: 'el-icon-picture', name: 'MapWeight', title: '测试3'}
    ]
    export default {
        path: '/map',  component: () => import('@/components/route/index'), name: 'Map', icon: 'el-icon-picture', title: '一张图',
        redirect:()=>{ return redirectF(children)},
        children
    }

    最后,就实现想要的效果了。redirect会根绝自己写的函数的返回规则返回的,这里例子为有权限的字路由列表中的第一个

    更多相关内容
  • 文章目录React Router 升级 v6: Redirect 重定向替代方案React Router v6 Redirect 更新官方推荐方案 1: 使用 Navigate 组件替代官方推荐方案 2: 自定义 Redirect 组件自定义 Redirect 示例: 防止异常跳转并上报完整...

    React Router 升级 v6: Redirect 重定向替代方案

    React Router v6 Redirect 更新

    React Router 的第六版做了许多破坏性的更新,其中一个就是将 <Redirect> 组件移除了。本篇就来介绍一下几个 Redirect 的替代方案

    官方推荐方案 1: 使用 Navigate 组件替代

    简而言之:直接使用 Navigate 替换原来的 Redirect 组件

    • in v5
    <Route path="about" render={() => <Redirect to="about-us" />} />
    
    • in v6
    // in v6
    <Route path="*" element={<Navigate to="/" replace />} />
    

    官方推荐方案 2: 自定义 Redirect 组件

    更进一步,我们来看一下源码

    我们可以看到核心代码其实就是一个 useNavigate 加上一个 useEffect。官方也告诉我们可以仿照 Navigate 组件自己重新实现一个

    const Redirect: FC<RedirectProps> = ({ to }) => {
      const navigate = useNavigate();
    
      useEffect(() => {
        navigate(to, { replace: true });
      });
    
      return null;
    };
    
    // ...
    
    <Route path="*" element={<Redirect to="/" />} />
    

    自定义 Redirect 示例: 防止异常跳转并上报

    当然 react router 官方的初衷实际上是希望用户能够更优雅的处理重定向的问题,而不是各种异常境况重定向就完事。因此合并跳转和定向的方法,合成了新的 useNavigate 钩子,让我们能在如上自定义组件内对重定向行为有更详细的描述

    下面我们提供一个扩张自定义重定向组件的示例,拒绝非法重定向并向控制台上报错误信息

    const Redirect: FC<RedirectProps> = ({ to }) => {
      const navigate = useNavigate();
    
      useEffect(() => {
        navigate(-1);
        console.error('Bad route');
      });
    
      return null;
    };
    

    我们使用 navigate(-1) 的方式来回到跳转到异常路由前的页面并打印一个错误信息


    完整代码示例

    https://github.com/superfreeeee/Blog-code/tree/main/front_end/react/react_router_v6_redirect

    参考连接

    TitleLink
    Remove <Redirect>s inside <Switch> - React Router Docshttps://reactrouter.com/docs/en/v6/upgrading/v5#remove-redirects-inside-switch
    What about clicking Links that aren’t updated? - React Router Docshttps://reactrouter.com/docs/en/v6/upgrading/reach#what-about-clicking-links-that-arent-updated
    Navigate Component - remix-run/react-router - Githubhttps://github.com/remix-run/react-router/blob/7dca9dc38c837ed94796325b1e0582aa72a9313f/packages/react-router/index.tsx#L165-L186
    展开全文
  • Vue router 重定向 redirect 如何传值

    千次阅读 2021-01-12 18:01:23
    配置 vue_router 时, 很经常就用到重定向(redirect)功能 例如: 没登录重定向到登录页面(导航卫士拦截也是高效的登录检查方法) index, home, house 重定向到首页等 这些不需要传参的情况, 直接设置为目标地址的字符串...

    配置 vue_router 时, 很经常就用到重定向(redirect)功能
    例如:
    没登录重定向到登录页面(导航卫士拦截也是高效的登录检查方法)
    index, home, house 重定向到首页等




    重定向 redirect 可接受的值

    字符串

    字符串作为 path 传入, 相当于 { path: redirect }

    {
    	...
    	redirect: "/assets/assetsIndex",
    	...
    }
    // 相当于
    {
    	...
    	redirect: { path: '/assets/assetsIndex' },
    	...
    }
    

    对象

    先判断有没有 name
    有 name
    发起跳转处提供的 name, query, hash, params 会往下传
    如果 redirect 也提供了这些属性则用 redirect 提供的往下传

    redirect: {
    	name: 'assetsIndex',
    	params: { id: 'redirect' },
    }
    // redirect 提供了 params, 目标组件可以收到该 params 数据
    // redirect 没有提供, 目标组件收到发起跳转处的数据(发起跳转是有数据的话)
    

    没有 name, 就找 path
    计算后的 path 和 query, hash 会往下传
    如果 redirect 也提供了这些属性则用 redirect 提供的往下传

    redirect: {
    	path: 'assetsIndex',
    	query: { id: 'redirect' },
    }
    

    方法

    方法必须 return 一个字符串
    return 的内容最终作为 path 往下传
    所以提供的 params 将无效

    redirect: function (to) {
    	return 'assetsIndex'
    }
    



    这些不需要传参的情况, 直接设置为目标地址的字符串就可以

    {
    	path: "/assets",
    	component: layout,
    	redirect: "/assets/assetsIndex",
    }
    

    如果你遇到的需求需要传值的话, 可以参考下面的方法




    query 带参跳转

    query 直接带参就可以了, 缺点是地址中会暴露参数

    // 发起跳转
    this.$router.push({ name: 'assets', query: { val: 'val值' } })
    /* or */
    this.$router.push({ path: '/assets', query: { id: '编程式_id' } })
    /* or */
    this.$router.push("/assets?id=编程式_id")
    
    // 重定向
    {
    	path: "/assets",
    	name: "assets",
    	redirect: "/assetsHome",
    }
    
    // 目标路由
    {
    	path: "/assetsHome",
    	component: assetsHome,
    },
    
    // 目标组件中取值
    this.$route.query
    



    params 带参跳转

    params 带参相对麻烦, 因为"如果提供了 path,params 会被忽略"在 redirect 中也是成立的
    所以我们可以知道, 不可以用 path 来设置路由
    而 params 带参的好处当然就是可以在地址隐藏参数了

    // 发起跳转
    this.$router.push({ name: 'assets', params: { id: '编程式_id' } })
    
    // 重定向
    {
    	path: "/assets",
    	name: "assets",
    	redirect: { name: 'assetsHome' },
    }
    
    // 目标路由
    {
    	path: "/assetsHome",
    	name: "assetsHome",
    	component: assetsHome,
    }
    
    // 目标组件中取值
    this.$route.params
    



    动态路径带参跳转

    本来是不想写这个方法的, 因为笔者本来就很讨厌动态路径带参, 觉得那个方法局限性太大, 加一个参数很麻烦, 还要顺序要求
    为了不要被读者吐槽我懒(敲代码本来就是为了偷懒嘛), 还是稍微写一下

    // 发起跳转
    this.$router.push({ path: '/assets/编程式_id' })
    
    // 重定向
    {
    	path: "/assets/:id",
    	name: "assets",
    	redirect: { name: 'assetsHome' },
    }
    
    // 目标路由
    {
    	path: "/assetsHome/:id",
    	name: "assetsHome",
    	component: assetsHome,
    }
    
    // 目标组件中取值
    this.$route.params
    



    [题外话] 重定向和别名的区别

    重定向是进入 a, 然后自动跳转到 b
    a 和 b 都是真实的路由地址, 这个过程经过两地址, 只是 a 不会被记录

    别名是进入 a, 实际上是进入 b
    a 不是真实的路由地址, 这个过程自始至终都只是在 b 地址

    end

    展开全文
  • forward和redirect的区别

    千次阅读 2022-04-20 19:32:56
    forward和redirect的区别 1.forward 和redirect forward又叫转发,表示转发,当请求来到时,可以将请求转发到其他的指定服务,用户端不知晓。 redirect又叫重定向,表示转发,当请求发给A服务时,服务A返回重定向给...

    1.forward 和redirect

    forward又叫转发,表示转发,当请求来到时,可以将请求转发到其他的指定服务,用户端不知晓。

    在这里插入图片描述

    redirect又叫重定向,表示转发,当请求发给A服务时,服务A返回重定向给客户端,客户端再去请求B服务。

    在这里插入图片描述

    2.使用forward注意事项

    1.转发和被转发的请求类型必须一致,即全是GET或者POST

    2.转发者方法不能被标识位@RestController或者@ResponseBody

    3.使用redirect注意事项

    1.redirect不支持post请求

    2.redirect需要携带请求参数,需要在url地址中进行编码防止中文乱码。

    4.两者的区别

    1.从地址栏显示来说:

    ​forword是服务器内部的重定向,服务器直接访问目标地址的 url网址,把里面的东西读取出来,但是客户端 并不知道,因此用forward的话,客户端浏览器的网址是不会发生变化的。
    ​redirect是服务器根据逻辑,发送一个状态码,告诉浏览器重新去请求那个地址,所以地址栏显示的是新的地址。

    2.从数据共享来说:

    ​由于在整个定向的过程中用的是同一个request,因此forward会将request的信息带到被重定向的jsp或者 servlet中使用。即可以共享数据
    ​redirect不能共享

    3.从运用的地方来说

    ​forword 一般用于用户登录的时候,根据角色转发到相应的模块
    ​redirect一般用于用户注销登录时返回主页面或者跳转到 其他网站

    4.从效率来说:

    ​forword效率高,而redirect效率低

    5.从本质来说:

    ​forword转发是服务器上的行为,而redirect重定向是客户端的行为

    6.从请求的次数来说:

    ​forword只有一次请求;而redirect有两次请求,

    展开全文
  • Nginx中absolute_redirect、port_in_redirect配置简述
  • redirect

    千次阅读 2017-11-14 17:09:10
    记录记录刚刚碰到的诡异的事情,在controller 的方法中最后return 是重定向redirect到一个参数,这个参数的内容是从数据库中获取的内容,是一个app下载的地址。可不知道为啥我自己这边运行都可以跳转到这个下载地址...
  • 细说Redirect重定向请求

    千次阅读 2021-04-21 20:34:28
    本来以为之前对Redirect的认识足够清楚,可是到实际开发之前我还是没有把这个问题想清楚,从而造成了需要花费更多的时间解决问题。总结下,并分享。 1.请求转发(forward): 当客户端(浏览器)向远程服务器发送一个...
  • redirect重定向

    千次阅读 2019-12-04 17:23:52
    redirect 不仅能重定向到本项目的接口中, return "redirect:/index"; 也能重定向到外面指定接口(url) return "redirect:" + this.getRequestCodeUrl(WeChat.REDIRECT_URL); spring 注解中 不能有@ResponseBody...
  • forward与redirect的区别

    千次阅读 2022-03-14 16:14:52
    forward与redirect的区别
  • forward 和 redirect 的区别?

    千次阅读 2019-06-26 10:17:55
    forward 和 redirect 的区别? 浏览器 url 地址显示不同 服务端通过 forward 返回,浏览器 url 地址不会发生变化;服务器通过 redirect 返回,浏览器会重新请求, url 地址会发生变化 前后台两者页面跳转的处理...
  • redirect使用

    千次阅读 2020-03-31 15:17:25
    一开始在一个页面,这个...可以通过redirect跳转来自动更新跳转到展示页面 @RequestMapping("/delete/{id}") public String delete(HttpServletResponse response,@PathVariable("id") int id){ response.s...
  • 路由重定向redirect的基本使用

    千次阅读 2021-01-08 09:17:32
    路由重定向redirect 重定向: 使得一个路由地址A与另一个路由地址B联系起来,执行A的时候会跳转执行B。 关键字:redirect。 用户第一次访问网站页面("/根目录"首页)时,地址栏里边没有“#锚点”的信息,也就没有...
  • 308 Permanent Redirect问题解决

    万次阅读 2021-11-17 15:09:04
    2021-11-17-308 Permanent Redirect 问题描述: postman测试接口,数据正常返回,代码当中使用restTemplate调用接口报错,显示308永久的重定向308 Permanent Redirect postman接口测试 接口地址: ...
  • VUE中路由的重定向——redirect

    千次阅读 2022-03-12 12:27:02
    VUE中路由的重定向——redirect 重定向:path中的url地址不能和redirect中的 { path:'/', redirect:'/index' }, 代码: <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"&...
  • http 307 Temporary Redirect Internal Redirect

    千次阅读 2019-07-22 12:52:01
    正常应该是 307 Temporary Redirect 而大多数网站是 307 Internal Redirect 应该是在nginx转发的时候使用add_header添加了头文件
  • vue中路由重定向redirect

    千次阅读 2021-07-14 17:36:26
    { path: '/', redirect: '/index'}, { path: '/index', component: index } ] 把"/"重定向到"/index" 2.重定向的地址需要接收参数然而没有传参 不会改变地址,页面不会报错但是也不会显示内容 3.重定向的...
  • flask中的重定向redirect方法常常被用来跳转页面,那redirect在跳转页面的同时能不能传递我们下一个页面需要的参数呢?带着这个问题我看了redirect()的源码,如下:1 def redirect(location, code=302, Response=None):2...
  • 背景 服务部署以及跳转展示...mv.setViewName(WebCst.REDIRECT + "/admin/sso/login"); 2.2 浏览器跳转截图 跳转的Location是如何生成的 后台是以springboot进行开发的,下面的分析都是基于springboot方式进行
  • redirect_uri和后台配置明明是一致的,但就一直报这个错,大佬们有谁知道问题吗 ``` ...
  • Java-重定向(redirect)

    千次阅读 2022-03-25 19:07:38
    JavaEE-重定向(redirect) 在Java代码里: response.sendRedirect("test.jsp"); 原理: 重定向是一个客户端行为,用户请求到达服务器之后,服务器返回响应,HTTP状态码置为302,并将转发的页面保存在响应头中的...
  • vue redirect 用法

    千次阅读 2020-07-08 16:44:53
    redirect: to => { const { hash, params, query } = to // 根据hash,或者params,或者query,或者其他条件进行判断,return要去的路径 return { path: '/' } } 方法2: { path: '*', redirect: '/' } ...
  • redirect,地址重定向了,查看前端是否连接上websocket,结果连上就断开,一直重连,原来是地址出错了 解决方案: 在前端修改连接websocket的地址,在最后追加一个斜杠 错误地址:ws://ip:port/websocket 正确...
  • redirectTo(关闭当前页面,跳转到其他页面) 示例代码如下: uni.redirectTo({ url:'./home/index' }) 注意: 需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与...
  • 反弹shell,报错 ambiguous redirect

    千次阅读 2021-12-06 23:31:37
    问题原因 ambiguous redirect,顾名思义为歧义重定向。 由于命令换行符导致的 解决方法
  • nginx中的proxy_redirect的使用

    千次阅读 2021-07-19 16:36:03
    一 proxy_redirect的作用 proxy_redirect 该指令用来修改被代理服务器返回的响应头中的Location头域和“refresh”头域。 二 语法结构 proxy_redirect 旧地址 新地址; proxy_redirect default; #默认配置 proxy_...
  • flask中redirect用法

    千次阅读 2019-09-14 08:58:40
    1.直接用,可以直接写完整链接,可以写视图函数路径 @index_blu.route('/1111') def test(): return redirect('http://www.baidu.com') ... return redirect('1111') 2.配合url_for一起用,url_for里面为函...
  • vue 重定向 redirect

    千次阅读 2020-05-19 18:15:08
    『重定向』的意思是,当用户访问/a时,URL 将会被替换成/b,然后匹配路由为/b export default new Router({ routes: [ ... redirect: '/HelloWorld' }, { path: '/HelloWorld', name: 'HelloWorld',
  • django url中redirect与 reverse

    千次阅读 2019-04-10 13:31:08
    redirect与reverse@TOC 1,redirect 解决的问题: 用户浏览网页的时候没有登录,自动跳转到登录页面 代码: cms:app中的文件 urls.py文件: from django.urls import path from . import views urlpatterns ...
  • springboot 重定向(redirect前缀)

    千次阅读 2019-12-19 19:30:19
    springboot重定向(redirect前缀) ******************************** 相关注解 @ModelAttribute:读取modelAndView中的数据 @Target({ElementType.PARAMETER, ElementType.METHOD}) @Retention...
  • Handling OAuth2 error: error="invalid_grant", error_description="Invalid redirect: =http://www.baidu.com does not match one of the registered values." spring Outh2请求code时,请求code重定向时与坑!...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 442,319
精华内容 176,927
关键字:

redirect