45跨域与登陆完成

1.[collapse title="instancetype是什么"]再组件中默认导出的东西，在其他地方被调用，那么被调用的是这个组件中实际导出的对象吗？不是，实际导出的是一个类似于类的对象描述。实际使用需要根据这个对象描述去创建真实的对象。所以在使用ref过程中我们传递的是一个类似于类但不是类的对象描述，所以是不被接收的只能先通过typeof转换为类，然后再通过instance type将其转换为包含能够创建该类所对应的对象的构造器的实例对象[/collapse]

2.

[collapse title="记住密码实现"]记住密码通过调用登陆函数时传入从记住密码checkbox中获得的数据，然后根据这个数据再登陆函数中编写记住密码的功能块[/collapse]

[collapse title="记住密码具体实现"]实现，函数主要借助local storage提供的getitem，setitem等接口实现，统一封装为一个类，使用时创建实例调用其方法即可。[/collapse]

6.跨域登陆与返回数据

[collapse title="跨域"]跨域简单地说就是前端调用后端的api，但是后端api和前端不是部署在一个服务器上，导致跨域访问不允许。但是可以通过webpack反向代理，由webpack进行代理请求，测试阶段用webpack就好，运行时改用Nginx，道理都是也一样的。[/collapse]

[collapse title="规范返回数据"]

不同的接口返回的数据类型不一样，这个要根据具体的接口文档来说明，我们此处使用的接口返回是统一的。所以可以把返回的类型接口写死。

[block]

export interface IloginData<T = any>{
    code:number,
    data:T,
}

[/block]

 

由于具体data不一样所以在IloginData里写为any。对于特定的请求我们单独编写类型接口,对于登陆接口我们编写IloginResult。在进行网络请求时传入

[block]

export function  accountLoginRequest(account:IAccount) {
    return prequest.post<IloginData<IloginResult>>({
        url:LoginAPI.AccountLogin,
        data:account
    })
}

[/block]

但是事实上返回的数据不止有这点

http://1.15.119.76/wp-content/uploads/2021/11/Snipaste_2021-11-07_17-36-31.png

之所以我们接收的对象数据只有code和data两个是因为我们在封装网络请求时，使用了响应拦截器，并单独取出返回数据中的data对象

[block]

       //调用共用拦截器（直接写入use中）
        this.instance.interceptors.response.use(
            (res)=>{
                //console.log("响应拦截成功")
                const data:any = res.data
                return res
            },

[/block]

保存并本地缓存token，在请求拦截器中获取缓存token，并添加到头部认证字段。

当然对于请求返回的数据我们需要储存在单一状态树status中，使用mutations。

[/collapse]

8.完成登陆转跳。页面拦截。vuex初始化。

1.登陆转跳直接用vuex的post即可。

2.拦截，作为单独的模块写在vuex中。注意是return 直接change token.path是不可行的。

[block]

router.beforeEach((to)=>{
  if(to.path !== "/login"){
    const token = LocalCache.getCache("token")
    if(!token){
      return '/login'
    }
  }

[/block]

3.在store入口导出一个初始化函数，在vue的main入口调用，函数内容为一下

[block]

export function  setUpStore() {
  store.dispatch("loginState/loadLocalLogin")
}

[/block]

调用的action方法如下

[block]

loadLocalLogin({commit}){
            const token = LocalCache.getCache("token")
            if(token){
                commit("changeToken",token)
            }
            const userInfo = LocalCache.getCache("userInfo")
            if(userInfo){
                commit("changeUserInfo",userInfo)
            }
            const Menus = LocalCache.getCache("Menus")
            if(Menus){
                commit("changeUserMenus",Menus)
            }
            console.log("初始化触发完成")
        }

[/block]

3.

发表回复

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