手动输入 /login
地址http://127.0.0.1:3000/#/login
push()
我原本想进入的是 个人中心/我的收藏/修改个人信息页,但是经过登录态校验,发现我没有登录,则跳转到登录页
Element
这个统一处理的组件 —> 历史记录已经有了/personal
replace
到登录页/login?to=/personal
replace
到来源页
/personal
在新闻详情页,我们点击收藏按钮,但因为没有登录,需要跳转到登录页
/detail/xxx
replace
到登录页/login?to=/detail/xxx
replace
到来源页/detail/xxx
会记录下当前页。// import { message } from "react";
import message from "@/components/message";
import styled from "styled-components";
import { Link } from "react-router-dom";
import { RightOutline } from "antd-mobile-icons";
import NavBarAgain from "@/components/NavBarAgain";
import { connect } from "react-redux";
import action from "@/store/actions";
import _ from "@/assets/utils";
/* 组件的样式 */
const PersonalStyle = styled.div`
.baseInfo {
box-sizing: border-box;
margin: 20px 0;
.pic {
display: block;
margin: 0 auto;
width: 86px;
height: 86px;
border-radius: 50%;
}
.name {
line-height: 50px;
font-size: 18px;
text-align: center;
color: #000;
}
}
.tab {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
height: 40px;
line-height: 40px;
font-size: 14px;
color: #000;
border-bottom: 1px solid #eee;
}
`;
const Personal = function Personal({
navigate,
profile,
removeLoginInfo,
clearStore,
}) {
return (
{profile.name}
我的收藏
{
removeLoginInfo();
clearStore();
_.storage.remove(`TK`);
message.success(`已安全退出`);
navigate(`/login?to=/personal&lx=singout`, { replace: true });
}}
>
退出登录
);
};
export default connect((state) => state.base, {
removeLoginInfo: action.base.removeLoginInfo,
clearStore: action.collect.clearStore,
})(Personal);
fang/知乎日报/zhihu/src/components/NavBarAgain.jsx
import React from "react";
import { NavBar } from "antd-mobile";
import styled from "styled-components";
import { useNavigate, useSearchParams } from "react-router-dom";
/* 组件的样式 */
const NavBarAgainStyle = styled.div`
.navbar-again-box {
padding: 0 10px;
height: 40px;
.adm-nav-bar-title {
font-size: 16px;
}
.adm-nav-bar-back-arrow {
font-size: 18px;
}
}
`;
const NavBarAgain = function NavBarAgain({ title }) {
const navigate = useNavigate();
const query = useSearchParams()[0];
const handle = () => {
// console.log(`query`, query);
let to = query.get("to");
let lx = query.get("lx");
if (/^\/detail\//.test(to)) {
navigate(to, { replace: true });
return;
}
if (to === `/personal` && lx === `singout`) {
//点击退出登录才进入的登录页。//因为退出登录之前,有可能进的还是需要权限校验的的地方,不会在退出登录时循环校验。
navigate(`/`, { replace: true });
return;
}
navigate(-1);
};
return (
{title}
);
};
NavBarAgain.defaultProps = {
title: "个人中心",
};
export default NavBarAgain;
// import { useState, message } from "react";
import { useState } from "react";
import message from "@/components/message";
import styled from "styled-components";
import { ImageUploader, Input, Button } from "antd-mobile";
import NavBarAgain from "@/components/NavBarAgain";
import { connect } from "react-redux";
import action from "@/store/actions";
import API from "@/api";
import ButtonAgain from "@/components/ButtonAgain";
/* 组件的样式 */
const UpdateStyle = styled.div`
.formBox {
padding: 15px;
.item {
display: flex;
align-items: center;
margin-bottom: 10px;
height: 55px;
line-height: 55px;
font-size: 14px;
&:nth-child(1) {
height: 80px;
line-height: 80px;
}
.label {
width: 20%;
text-align: center;
}
.input {
width: 80%;
}
}
.adm-space-item {
padding-bottom: 0;
}
}
.submit {
display: block;
margin: 0 auto;
width: 60%;
height: 35px;
font-size: 14px;
}
`;
const Update = function Update({ profile, queryLoginInfo, navigate }) {
// 图片上传的处理。
let [fileList, setFileList] = useState(() => {
return [
{
url: profile.pic,
},
];
});
// 清空已上传的图片。
const handleDelete = () => {
setFileList([]);
};
// 上传图片前:限制文件大小。
const beforeUpload = (file) => {
// console.log("beforeUpload", file);
let theMax = 1024 * 1024;
if (file.size > theMax) {
message.error(`上传图片过大,不能超过${theMax / 1024}kb`);
return null;
}
return file;
};
// 图片上传。
// const upload = async (file) => {
// // console.log("upload", file);
// let result = { url: `` };
// try {
// let { code, pic } = await API.upload(file);
// if(+code===0)
// if (+code !== 0) {
// message.error(`上传失败`);
// setFileList([]);
// } else {
// message.success(`上传成功`);
// setFileList([{ url: pic }]);
// result.url = pic;
// }
// } catch (_) {}
// return result;
// };
// 图片上传。
const upload = async (file) => {
try {
let { code, pic } = await API.upload(file);
if (+code === 0) {
message.success(`上传成功`);
setFileList([{ url: pic }]);
return { url: pic };
}
message.success(`上传失败`);
} catch (_) {}
setFileList([]);
return Promise.reject(`失败`);
};
// 表单处理。
let [name, setName] = useState(profile.name);
const submit = async () => {
let username = name.trim();
let pic = ``;
if (Array.isArray(fileList) && fileList.length > 0) {
pic = fileList[0].url;
}
//表单校验
// console.log(username ,pic);
if (!username || !pic) {
message.error(`姓名与头像不能为空`);
return;
}
// 发送请求
try {
let { code } = await API.updateUserInfo(username, pic);
if (+code !== 0) {
message.error(`修改失败`);
return;
}
await queryLoginInfo();
message.success(`修改成功`);
navigate(-1);
} catch (error) {}
};
return (
头像
姓名
{
setName(value);
}}
/>
提交
{/* 当前图片状态值:{JSON.stringify(fileList)} */}
);
};
export default connect((state) => state.base, action.base)(Update);