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.
