Ant Design Pro:token的存储

Ant Design Pro使用umi中的useModel存储源数据

— 将用户信息currentUser也存储了其中 —

import { useModel } from 'umi';
const { initialState, setInitialState } = useModel('@@initialState');

用户信息与token的关闭是紧密相连的,所以大可直接将token存在currentUser当中去。
意思就是在登录的时候接口返回用户信息的时候也将token存进去。
它们的生命周期应当是相同的。
如果将currentUser已经处理好了的话,直接在登录部分追加上token即可。如下:

const handleSubmit = async (values) => {
  await login(values).then(res=>{
if(res.status===200){
    console.log(res.data);  
       setInitialState({
        currentUser: {
      ...res.data.user_info,
      token:res.data.token,
    } ,
      });
  
};

设置之后,由于请求接口都需要传递token,所以在页面中获取token如下:

import { useModel } from 'umi';
const { initialState, setInitialState } = useModel('@@initialState');
const [token, setToken] = useState(initialState?.currentUser?.token);

接着在接口中直接将token传过去就可以了。

你可能感兴趣的:(前端,javascript,vue.js)