uni-app中使用vuex和csrf

uni-app 中使用vuex

  1. 在根目录创建一个stroe目录,并创建index.js

2.index.js中的内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    login: false,
    csrf: '',
    userInfo: {},
  },
  mutations: {
    login(state, userInfo) {
      console.log(user)
      state.login = true;
      state.token = user.token;
      state.userName = user.userName;
      state.avatarUrl = user.avatarUrl;
            uni.setStorage({
                key: 'userInfo',
                data: user
            })
    },
    setCsrf(state, csrf) {
        state.csrf = csrf;
    },
    logout(state) {
      state.login = false;
      state.token = '';
      state.userInfo = {};
      uni.removeStorage({
      key: 'userInfo'
      })
    }
  }
})
export default store;
  1. 在main.js中挂载

    import store from './store/index'
    Vue.prototype.$store = store
    Vue.config.productionTip = false
    App.mpType = 'app'
    Vue.use(uView);
    const app = new Vue({
    ...App,
    store,
    })
  2. 在app.vue中使用,将csrf在加载的时候存入vuex中,之后每次post请求都带上,state中的属性要在computed中声明。

    <script>
    import { mapMutations, mapState } from 'vuex'
    export default {
        methods: {
            ...mapMutations(['setCsrf']),
        },
        computed: {
            ...mapState(['csrf','uerInfo']),
        },
        onLaunch: function() {
            uni.request({
                url: '/api/v1/setCsrf',
                methods: 'GET',
                success: (res) => {
                    this.setCsrf(res.data.csrf);
                    console.log(this.csrf);
                },
                fail: (error) => {
                    console.log(error);
                }
            });
        },
    }
    </script>
  3. 每次请求带上csrf

signup() {
    uni.request({
    header: {
        'Content-Type': 'application/x-www-form-urlencoded'
        },
        url: '/api/v1/user/signup',
        method: 'post',
        data: {
            _csrf: this.csrf,
            userId: "124",
            password: "124",
            nickName: "王",
        },
        success: (res) => {
            console.log(res.data);
        },
        fail: (res) => {
            console.log(res);
        }
    });

遇到的问题

后端使用的egg,一开始没有开启csrf,使用post的时候,发现后端无法获取post的参数,get请求可以通过ctx.query获得,以为是没有启动csrf的问题,开启后发现还是不行,查看请求发现请求的数据为form data的类型,之前后端一直用的ctx.param获取参数,所以无法获取。使用ctx.request.body成功获取