工作-小知识点总结

一、关于es6

1、扩展运算符...：

      数组和序列的转换

      常用于替换，比如:

const obj = {
    num1:1,
    string:'aa'
}

const newObj = {
    ...obj,
    string:'bbb'
}

2.const { dispatch } = this.props;    等价于 const dispatch = this.props.dispatch; 

3.关于map函数   不会对空数组进行操作且不会改变原来的数组

4.活用JSON.parse和JSON.stringfy

const condition =[{
        type:"and",
        detail:{
           type:"and",
           value:{
               string1:"aa",
               string2:"bb"
           } 
        }
    },{
        type:"and",
        detail:{
           type:"and",
           value:{
               string1:"aa",
               string2:"bb"
           } 
        }
}];

JSON.stringfy(condition)

//结果
[{"type":"and","detail":{"type":"and","value":{"string1":"aa","string2":"bb"}}},{"type":"and","detail":{"type":"and","value":{"string1":"aa","string2":"bb"}}}]

二、关于token的理解

token实际上是用户登陆后，后端会在返回的数据中派发一个token，由前端进行cookie存储，每次发送请求时都需要将这个token信息在header中携带进去，这样后端拿到了header中携带的token，和其session中的token做比对，如果相同便同意此次请求

1.首先用户进行登陆，通过表单验证

onLogin = (values) => {
        this.props.fetchLoginByForm({
            data: values,//传递出去用户名和密码
        }).then(data => {
            const result = data.result || {};
            myCookies.set('token', result.token);
            myCookies.set('id', result.user.id);
            if (this.props.routes.tree.length > 0) {
                var route = this.props.routes.tree[0];
                let path = route ?
                    route.redirect ? route.redirect : route.path
                    : "/";
                this.props.history.push(path)//跳转到首页
            }
        }).catch(error => {
            console.log(error)
            message.error(error.message || '登录失败');
        });
    }

2.前端将这个数据存储好后，代码如下（App.js)

componentDidMount() {
    if (this.props.user.isLogin) {
      return;
    }//如果在登陆下他的isLogin一直是true，在reducer.js中进行设置
    const token = myCookies.get('token');//一旦他关闭了这个界面，一切组件从零开始渲染，二isLogin的值为false
    const id = myCookies.get('id');//获取到用户的id，在进行一次请求是为了防止本地cookie并没有来的及更新最新的一些修改
    if (token) {
      this.props.login({
        urlParams: { userId: id }//此处是为了获取在这个id下的最新用户信息及页面信息
      }).then(res => {
      }).catch(error => {
        console.log(error);
        message.error(error.message || '获取用户信息失败');
        this.props.history.push('/login')
      })
    } else {
      this.props.history.push('/login')
    }
  }

3.在reducer中控制 isLogin 这个状态

export default (state = { isLogin: false, userInfo: {}, role: [] }, action) => {
    switch (action.type) {
        case USER.LOGINBYFORM_SUCCESS:
        case USER.LOGINBYID_SUCCESS:
            return {
                isLogin: true,
                userInfo: action.response.user,
                role: action.response.role
            };
        case USER.LOGINBYFORM_FAILURE:
        case USER.LOGINBYID_FAILURE:
            return {
                isLogin: false,
                userInfo: {},
                role: [],
                ...action
            };
        case USER.LOGINOUT_SUCCESS:
        case USER.LOGINOUT_FAILURE:
            return {
                isLogin: false,
                userInfo: {},
                role: [],
                ...action
            }
        default:
            return state;
    }
};

4.前文提到，每次发请求其实是携带token进行的请求，如果是ajax我们就需要加上header字段，带着token；但是我们现在选用axios的api可以使用它的拦截器，保证在发送请求之前，都进行一次token的校验，token校验通过才能发请求

// 添加请求拦截器
axios.interceptors.request.use(
    config => {
        if (config.url === "/premission/login") {
            return config;
        }
        if (myCookies.get('token')) {
            // 为除了登陆的请求在header里添加token
            config.headers.Authorization = myCookies.get('token')
            return config;
        } else {
            return Promise.reject(new Error("token失效"));
        }
    },
    error => {
        return Promise.reject(error);
    }
);