umi中登录后重定向至登录前页面的实现方案

简介: 日常开发中,经常会遇到这种情况:某个页面是从别的链接直接跳转的,未经登录页面的登录操作;这个时候就需要跳转至登录页进行登录获取用户信息,然后再跳转到之前的页面继续进行操作。

此方案为在钉钉微应用中通过钉钉免登操作实现登录,如果有自己的登录方案,则可以进行适当改进;框架使用的是umi,react-router也适用


1. 场景

日常开发中,经常会遇到这种情况:某个页面是从别的链接直接跳转的,未经登录页面的登录操作;这个时候就需要跳转至登录页进行登录获取用户信息,然后再跳转到之前的页面继续进行操作。


2. 实现思路


![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ccf79ddcd34747caaa2ac14d78d5337b~tplv-k3u1fbpfcp-zoom-1.image)


3. 实现方案


1. 跳转登录前的页面配置


这里是在最外层的 `layout.jsx` 组件中监听保存在 dva 中的用户信息/token信息,如果为空,则重定向至 `'/'` 目录下(如果有登录页,可以重定向至登录页):


// BaseLayout.tsx/** * 监听用户信息,为空时,重新进行免登操作,用于点击通知直接进入审批页面 * 为路由添加 from 参数,以便于在登录后能再次进入登录前的页面 */useEffect(() => {
if (JSON.stringify(common.userData) ==='{}') {
history.replace({
pathname: '/',
query,
state: {
from: pathname, // 关键点:携带当前页面路径信息      },
    });
  }
}, [common.userData]);



2. 登录页面配置


'/'  路径下,进入 `pages/index.jsx` 会执行 login 动作,执行钉钉的免登操作,这样就会在登录之后,跳转至登录前的页面:


// index.tsx...const [loggingIn, setLoggingIn] =useState(true);
const [redirectInfo, setRedirectInfo] =useState({
pathname: '/business-approve',
query: {},
  });
useEffect(() => {
// 免登操作:获取用户信息,token信息ready(() => {
// 获取免登授权码runtime.permission.requestAuthCode({
corpId:
process.env.NODE_ENV==='production'?'ding10a015c6f52fb517a39a90f97fcb1e09'          : 'ding10a015c6f52fb517a39a90f97fcb1e09', // 企业idonSuccess({ code }) {
// 获取用户信息getUserInfoAndToken({ code }).then(res=> {
const { code, data } =res;
if (`${code}`==='200'&&data) {
const {
userInfo: { userId },
            } =data;
// 关键点:如果 location 包含 state 则为登录后需要重定向,设置重定向信息,使用 Redirect 重定向if (location?.state) {
const { query, state } =location?.state|| {};
setRedirectInfo({
pathname: state?.from??'/business-approve',
query,
              });
            }
setLoggingIn(false);
          }
        });
      },
    });
  });
}, [location]);
...returnloggingIn?null : <Redirectto={{ ...redirectInfo }} />;


目录
相关文章
|
存储 前端开发 PHP
构建一个简单的网站,包括用户注册、登录功能
构建一个简单的网站,包括用户注册、登录功能
285 1
|
5月前
|
SQL 小程序 JavaScript
微信小程序登录(保持登录状态)
微信小程序登录(保持登录状态)
305 1
|
6月前
|
SQL 前端开发 JavaScript
包含后端的登录与注册页面
包含后端的登录与注册页面
58 0
|
6月前
|
JavaScript
vue制作防止用户未登录或未填写信息就跳转页面的路由拦截器
vue制作防止用户未登录或未填写信息就跳转页面的路由拦截器
86 0
|
JavaScript 前端开发 数据安全/隐私保护
vue编写一个登录页面,使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
vue编写一个登录页面,使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
1143 2
vue编写一个登录页面,使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
Uni-App - 用户没有登录自动跳转登录页面方案
Uni-App - 用户没有登录自动跳转登录页面方案
1336 0
Uni-App - 用户没有登录自动跳转登录页面方案
|
前端开发
fastadmin框架怎么重定向至后台模块
fastadmin框架默认打开指向的是前端index模块部分的页面,有时我们需要切换至后台非常复杂,这时就需要进行一下重定向。
254 0
|
JavaScript
vue地址栏输入路由跳转到首页,未登录跳转到登录页面的方法
vue地址栏输入路由跳转到首页,未登录跳转到登录页面的方法
334 0
uniapp登陆页面功能
uniapp登陆页面功能
175 0
|
存储 JavaScript 数据安全/隐私保护
vue登录页实现使用cookie记住7天密码功能(思路)
vue登录页实现使用cookie记住7天密码功能(思路)
119 0