探索Quasar 03 创建登录页

1.按照图片画出一个登录页

 

 2.创建登录函数在单独的文件中 login.ts 。本来想着此处先预处理token，获取到返回值后第一时间先将token保存到vuex中，在返回一个新下promise。

注意：实验证明在单独ts文件中，使用  useStore（）函数返回的是空对象。试着在setup函数中使用useStore没有任何问题。所以此处获取到response即存储到vuex的方案搁浅。

注意：quasar中使用的useStore是  import { useStore } from 'src/store';  而非标准的 from vuex。

 

import { AxiosResponse } from 'axios';
import { api } from 'boot/axios'


export const login = (obj:{mobile:string, password:string}) => {
  const data = {
      'client_id':client_id,
      'client_secret':client_secret,
      'grant_type':grant_type,
      'username':obj.mobile,
      'password':obj.password
  };

  const p = new Promise<AxiosResponse<idsResult>>((resolve, reject)=>{
    // 调用reject
    api.post<idsResult>('/ids/connect/token',data)
    .then((response) => {
      console.log('response is:');
      console.log(response.data)
      resolve(response);
    })
    .catch((err) => {
      debugger;
      console.log('got error');
      reject(err);
    })

  });

  return p
}

　　所以只能在login.vue中保存token到vuex中

      login({mobile:myForm.value.Name,password:myForm.value.Password})
          .then((response) => {
            console.log('response is:');
            console.log(response.data)
            $store.commit('zionStoreModule/saveAccessToken', response.data.access_token)
            localStorage.setItem('access_token',response.data.access_token)
            router.replace('/')
            .catch(()=>{
              console.log('got error');
            });
          })
          .catch((err) => {
            debugger;
            console.log('got error');
          })

　　后期发现，只要保存到localstorage即可从axios中取出，而保存到vuex中反而不好取出。