Vue/vant——user.js中需要用到的属性配置

简介: user.js中需要用到的属性配置

export default {
  state:{
  token:false,
  status:false,
  userInfo:{}
  },
  mutations:{
        // 登陆成功后渲染数据
  login(state,userInfo){
            state.userInfo = userInfo
            state.token = userInfo.token
            state.status = userInfo.status
            window.sessionStorage.setItem('userInfo',JSON.stringify(userInfo))
    window.sessionStorage.setItem('token',JSON.stringify(userInfo.token))
        },
        // 初始化存储
        initUser(state) {
    let userinfo = window.sessionStorage.getItem('userInfo')
    let userInfo = JSON.parse(userinfo)
    if (userInfo) {
    state.userInfo = userInfo
    state.token = userInfo.token
    state.status = userInfo.status
    }
  },
        // 退出登录删除数据
        loginOut(state) {
    state.userInfo = {}
    state.token= false
    state.status= false,
    window.sessionStorage.removeItem('userInfo')
    window.sessionStorage.removeItem('token')
  },
  },
  getters:{},
  actions:{
    },
}

Login.vue 登陆成功后渲染数据

this.$axios({
            method: "post",
            url: "/login",
            data: {
              username: this.username,
              password: this.password,
            },
          }).then((result) => {
              console.log(result);
              if (
                this.username === result.data.data.username ||
                this.password === result.data.data.password
              ) {
                Toast("登陆成功!");
                this.login(result.data.data);
                return this.$router.push("/Myfile");
              } else {
                Toast("账号或密码不正确,请重新输入");
                this.pshow = true;
                return (this.show = false);
              }
            })

app.vue进行初始化

d52e72d30d9948009c55d5dc2e66a353.png

myfile.vue 退出登录删除数据

this.$axios({
            url: "/logout",
            method: "post",
            data: {},
            headers: {
               token: true
              //  token:JSON.parse(sessionStorage.getItem('token'))
            },
          }).then((v) => {
            console.log('1111111111222222');
            console.log(v);
          });
          this.$router.push("/Login");
           setTimeout(() => {
              this.loginOut();
           }, 100);
        })
        .catch(() => {
          //
        });
相关文章
|
8天前
|
JavaScript API
Vue3中的计算属性能否动态修改
【9月更文挑战第5天】Vue3中的计算属性能否动态修改
40 10
|
12天前
|
JavaScript
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中,TypeScript编译对效率的影响,以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程,指导读者如何在项目中安装依赖包,并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后,文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
|
10天前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
22 1
JavaScript基础知识-枚举对象中的属性
|
16天前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
8天前
|
JavaScript API
如何使用Vue3的可计算属性
【9月更文挑战第5天】如何使用Vue3的可计算属性
41 13
|
1天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
6天前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
8 1
|
16天前
|
JavaScript 前端开发
vue获取元素属性
vue获取元素属性
32 3
|
16天前
|
JSON JavaScript 前端开发
Android调用Vue中的JavaScript代码
Android调用Vue中的JavaScript代码
14 3
|
20天前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
55 0
Vue项目打包后都产生了哪些JS请求?