工作-小知識點總結

一、關於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);
    }
);