,

umi4 路由守卫

开启热更新fastRefresh umi3中是hmr:true src\models src\pages\us…

开启热更新fastRefresh

umi3中是hmr:true

export default defineConfig({
  // routes: [
  //   { path: "/", component: "index" },
  //   { path: "/docs", component: "docs" },
  // ],
  plugins: [
    '@umijs/plugins/dist/antd',
    '@umijs/plugins/dist/dva',
  ],
  fastRefresh: true,
  dva: { 
    immer: { enableES5: true }
  },

src\models

import $http from 'api';
export default {
    namespace: 'common',
    state: {},
    subscriptions: {
        setup({dispatch, history}){
            console.log(arguments,'arguments');
            //app.start阶段执行
            dispatch({type: 'queryUserLogin', payload: {history}});
        }
    },
    reducers: {},
    effects: {
        *queryUserLogin({payload}, {call, put, select}){
            const {history, history:{location:{pathname}}} = payload;
            //console.log(payload,'payload');
            if(pathname !== '/users/login' &&  pathname !== '/users/forgetPwd'){
                //需要拦截
                if(
                    !sessionStorage.getItem('userProfile')||
                    !sessionStorage.getItem('token')||
                    !sessionStorage.getItem('routeList')
                ){
                    history.push('/users/login');
                }else{
                    //
                    const res = yield call($http.queryUserLogin);
                    console.log(res,'queryUserLogin');
                    if(res.code !==0) return;
                    //登录成功
                    const {data: routeList} = yield call($http.getRouteList);
                    console.log(routeList,'getRouteList');
                    sessionStorage.setItem('routeList', JSON.stringify(routeList));
                }
            }else{
                sessionStorage.clear();
            }
        }
    },
}

src\pages\users\model.js

用户登录成功跳转到权限路由页

import $http from 'api';
import {message} from 'antd';
import { history } from 'umi';

export default {
  namespace: 'user',
  state: {
    userInfo: sessionStorage.getItem('userProfile') ? JSON.parse(sessionStorage.getItem('userProfile')) : {},
    token: '',
    loginType: '',
  },
  reducers: {
    updateUserProfile:(state, {payload})=>({...state, ...payload})
  },
  effects: {
    *login({payload}, {put, call, select}){
      //console.log(payload,'payload');
      const {data,msg} = yield call($http.userLogin, payload);
      if(!data){
        message.error(msg);
        return;
      }
      //获取路由
      const {data: routeList} = yield call($http.getRouteList);
      console.log(routeList,'getRouteList');

      sessionStorage.setItem('userProfile', JSON.stringify(data));
      sessionStorage.setItem('routeList', JSON.stringify(routeList));
      yield put({
        type: 'updateUserProfile',
        payload: {userInfo: data, routeList: routeList},
      });
      //
      console.log(data,msg,"test");
      history.push(routeList[0].route);
    }
  },
}

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

About the Author

每个人都有自己得时区,在自己得时区里,一切都是准时的。

BlockSpare — News, Magazine and Blog Addons for (Gutenberg) Block Editor