精华内容
下载资源
问答
  • vue用户登录保存session
    2021-10-11 10:12:59

    vuex部分

    state: {
    		user:sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : ''
    	},
    	mutations: {
    		//获取用户信息
    		getUser(state, user){
    			state.user = user
    			this.commit('saveUser')
    		},
    		//退出登录
    		logoutINn(state,user){
    			state.user = user;
    			this.commit('saveUser')
    		},
    		//保存用户信息在本地
    		saveUser(state){
    			sessionStorage.setItem('user', JSON.stringify(state.user));
    		}
    	},

    登录时获取到用户信息

        //获取个人信息
        getCenter() {
          this.api.getCenter().then((res) => {
            if (res.data.code == 1) {
              this.$store.commit("getUser", res.data.data);
            }
          });
        },

    在其他地方使用

    html

    <div style="width: 100%" class="d-flex align-items-center justify-content-center">
                  <img
                    :src="user.avatar"
                    style="width: 2.5rem; height: 2.5rem"
                    class="obj-cover rounded-circle bg-light"
                  />
                </div>
                <div class="name">{{ user.nickname }}</div>

    js部分

    import { mapState } from "vuex";
    export default {
      computed: {
        ...mapState({
          user: (state) => state.user,
        }),
      },
      methods: {
        //退出登录
        logout() {
          this.api.loginout().then((res) => {
            console.log(res.data.code);
            if (res.data.code == 1) {
              this.$message({
                message: "退出登录成功",
                type: "success",
              });
              this.$store.commit("logoutINn", "");
              this.$router.push({
                name: "Home",
              });
            } else {
              this.$message.error(res.data.msg);
            }
          });
        },
    
    
      },
    };

    更多相关内容
  • 用户登录的时候,保存相关登录信息的参数 在登录成功之后,执行下方的代码,先将用户相关的参数和token存放入sessionStorge,再由sessionStorage传入vuex中。关于sessionStorage的相关api的用法 //将用户名放入...

    1.安装vuex

            使用npm包管理工具来安装 Vuex,命令格式如下所示:

    npm install vuex --save
    

            在命令中加上-save是因为这个包需要在生产环境中使用

    更多安装方式请参考:Vuex 安装

    2.安装完成后构建如下目录 

            vuex的目录结构:  

             

    • actions => 像一个装饰器,包裹mutations,使之可以异步。
    • getters => 从基本数据派生的数据  
    • mutations => 提交更改数据的方法,同步!      
    •  store => 核心仓库   

      01.创建store.js文件

                  每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着应用中大部分的状态 (state)state即Vuex中的基本数据并且它应该是唯一的

    import Vue from 'vue'
    import Vuex from 'vuex'
    import * as getters from'./getters'
    import * as mutations from'./mutations'
    import * as actions from'./actions'
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
      //存储用户登录信息的一个状态
      state:{
        userName:null,//当前用户
        roleName:null,//用户相关的信息
        isLogin:false,//登录状态
        token:'' //用户登录成功后持有的token
      },
      //关联着其他三个目录,目的松耦合
      getters,
      mutations,
      actions
    })
    export default store;

     02.创建getters.js文件

    • 用于获取store.js文件中的参数
    • 包含多个计算属性(get)的对象
    • 谁来读取: 组件中: $store.getters.xxx
    export const isLogin = state => state.isLogin;
    export const userName = state => state.userName;
    export const roleName = state => state.roleName;

     03.创建mutations.js文件

    • 包含多个直接更新 state 的方法(回调函数)的对象
    • 由action 中的 commit(‘mutation 名称’)来触发
    • 只能包含同步的代码, 不能写异步代码
    //更改用户状态信息
    export const userStatus = (state, user) =>{
        //判断用户是否存在
        if (user!=null){
            state.userName = JSON.parse(user).userName;
            state.roleName = JSON.parse(user).roleName;
            state.isLogin = true;
        }else if (user==null){
            //登出时清空sessionStroage里面的参数
            sessionStorage.setItem("user",null);
            sessionStorage.setItem("userToken",'');
            state.currentUser = null;
            state.isLogin = false;
            state.assign='';
        }
    }
    //更改token
    export const setToken = (state,token) =>{
        if (token!=null){
            state.token = token;
        }else {
            state.token = '';
        }
    }

    04.创建actions.js文件

    • 包含多个事件回调函数的对象
    • 通过执行: commit()来触发 mutation 的调用, 间接更新 state
    • 谁来触发: 组件中: $store.dispatch(‘action 名称’, data1) // ‘zzz’
    • 可以包含异步代码(定时器, ajax) 
    //调用mutations
    export const setUser = ({commit},user) => {
        commit("userStatus",user);
    }
    export const setToken = ({commit},token) =>{
        commit("setToken",token);
    }

    05.在入口文件main.js文件引入store.js

            引入vuex:

    
    // 引入vuex
    import store from './store/store'

             在vue实例中创建store:

    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store, //创建store对象
      components: { Layout },
      template: '<Layout/>'
    })

            图片演示:

    注意:将vuex集成 到vue项目中如果使用的idea会自动提示下载插件依赖,或者用vue脚手架集成

    3.在用户登录的时候,保存相关登录信息的参数

    在登录成功之后,执行下方的代码,先将用户相关的参数和token存放入sessionStorge,再由sessionStorage传入vuex中。关于sessionStorage的相关api的用法

    //将用户名放入sessionStorage中
    sessionStorage.setItem("user", JSON.stringify(resp.data));
    sessionStorage.setItem("userToken", resp.data.userPwd)

    再将用户登录的相关参数放入vuex,调用setUser即执行actions.js中的方法来改变状态,则进入mutations.js中的userStatus方法,最终实现改变store.js中的三个状态。

     //将用户名放入vuex中
    _this.$store.dispatch("setUser", JSON.stringify(resp.data));
    _this.$store.dispatch("setToken", resp.data.userPwd);
    //打印login状态
     console.log(_this.$store.state.isLogin);

    这时可以通过{{ this.$store.state.xxx}}获取到vuex中state的状态参数到页面中

        <div class="back">
            <h5>当前管理员:<span style="color: red">{{ this.$store.state.userName }} </span> 登录!
                等级:<span style="color: red">{{ this.$store.state.roleName }} </span>
                <el-button style="color:#0340f9;" type="text" @click="open">【退 出】</el-button>
            </h5>
        </div>

    4.获取已经登录的状态及其相关信息进行验证用户是否已经登录

    由于vuex中的状态state一旦页面刷新,数据就不再存在。所以为了实现在刷新页面时,仍然展现出或获取相关参数,就需要从sessionStorage种提取状态再传值给vuex

    methods: {
            //判断是否已经登录状态
            isLogin() {
                //判断sessionStorage中是否有登录信息
                if (sessionStorage.getItem("user") != null && sessionStorage.getItem("userToken")) {
                    //存在登录信息就从sessionStorage中提取状态再传值给vuex中
                    this.$store.commit("userStatus", sessionStorage.getItem("user"));
                } else {
                    //登录不成功就将vuex中的state清空
                    this.$store.commit("userStatus", null);
                }
                //返回登录状态islogin
                return this.$store.getters.isLogin;
            },
            //通过登录状态来判断用户是否登录执行相关的操作
            ver() {
                if (this.$store.state.isLogin) {
                    console.log("已登录");
                    // this.$notify({
                    //     title: '系统提示',
                    //     message: '欢迎管理员:'+this.$store.state.userName,
                    //     position: 'bottom-right'
                    // });
                } else {
                    //如果没有登录就返回登录界面
                    this.$router.push("/");
                    this.$message({
                        message: '警告,请登录账户',
                        type: 'warning'
                    });
                }
            },
    }
    

    每当刷新页面的时候使用钩子函数调用验证用户登录的方法,这样就实现了保存用户登录信息的功能

       //此方法写在method外
     created() {
            this.isLogin();
            this.ver();
        }

    5.执行登出操作

            演示的html:

    <div class="back">
            <h5>当前管理员:<span style="color: red">{{ this.$store.state.userName }} </span> 登录!
                等级:<span style="color: red">{{ this.$store.state.roleName }} </span>
                <el-button style="color:#0340f9;" type="text" @click="open">【退 出】</el-button>
            </h5>
        </div>

            登出账号的方法:

    open() {
                this.$confirm('确定退出当前账号, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push("/");
                    this.$message({
                        type: 'success',
                        message: '退出成功!'
                    });
                }).catch(() => {
                    this.exits = false;
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    });
                });
            },

                 到这里需要注意的是用户登录之后,只要回到登录界面,必然是执行了登出操作。所以直接在login.vue(登录页面)里加一个路由控制就可以了,就是login的组建内守卫,当用户处在登录页面是就会触发它将sessionStorage里的用户参数和token清空

        //此方法写在method外面
        //to: Route: 即将要进入的目标路由对象
        //from: Route: 当前导航正要离开的路由
        //next():必须执行
     beforeRouteEnter: (to, from, next) => {
            next(vm => {
            // vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
                vm.$store.dispatch("setUser", null);
            });
        },

    关于beforeRouteEnter详细解释

    展开全文
  • vue操作session保存和获取对象信息 const path = '/user' const tabsData = [] const tab = { path: '/' + path, name: name } tabsData.push(tab) // 保存 window.sessionStorage.setItem('tabsData',...

    vue使用session功能,保存和获取对象信息

      const path = '/user'
      const tabsData = []
      const tab = {
       path: '/' + path,
        name: name
      }
      tabsData.push(tab)
      
      // 保存
      window.sessionStorage.setItem('tabsData', JSON.stringify(tabsData))
      // 获取
      JSON.parse(window.sessionStorage.getItem("tabsData));
    
      // 保存字符串信息
      window.sessionStorage.setItem('path', path)
      // 获取字符串信息
      window.sessionStorage.getItem('path')
    
    展开全文
  • 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了。然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无法保存,而且就算保存了...
  • Vue保存用户登录状态

    万次阅读 2017-06-05 15:49:40
    首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的。 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的“登录...

    首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的。
    登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的“登录注册”字样变为“用户名”。
    为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage

    代码如下:
    register.vue中用户点击登录触发signIn方法

         signIn(){
            this.formData = $(".form").serialize();
            var that = this;
            this.$http.get("/api/user", this.formData)
              .then(response => {
                that.userName = response.data.data.user.userName;
                that.userHead = response.data.data.userHead;
                that.$emit('userSignIn', that.userName);
              })
              .catch(error => {
                console.log(error);
              });
          }

    这里为了测试我直接mock的数据,真实情况应该是this.$http.post
    这里的重点是那句

     that.$emit('userSignIn', that.userName);

    向父组件(App.vue)传值

    App.vue代码HTML

    <keep-alive>
         <router-view @userSignIn="userSignIn"></router-view>
    </keep-alive>

    App.vue代码JS

    export default {
    
      data(){
        return{
          userName: sessionStorage.userName
        }
      },
    
      methods:{
        //子组件(register)将用户名传过来
        userSignIn(userName){
          sessionStorage.userName = userName;
          this.userName = sessionStorage.userName;
        }
      }
    }

    这样父组件就可以使用用户名,保持了登录状态,并且因为使用了sessionStorage,刷新页面也可以保持。

    展开全文
  • vue 保存登录信息

    千次阅读 2021-12-18 11:15:23
    登录界面中使用账号和密码登录,需要记录用户登录信息,在下次进入登录界面时将上次登录信息反写到界面中。 浏览器:Google Chrome 内核版本: Chromium 75.0.3770.100 + IE (Trident 7~11) 登录界面截图 ...
  • vue前后端分离session过期重新登录的实现简单回顾cookie和sessioncookie和session都是回话管理的方式Cookiecookie是浏览器端存储信息的一种方式服务端可以通过响应浏览器set-cookie标头(header,),浏览器接收到这个...
  • vue中使用session Storage和vuex保存用户登录状态

    万次阅读 多人点赞 2020-04-10 09:45:59
    最近做项目需要保存用户登录状态,要做到刷新页面用户状态不变,以及实现登出功能。实际上是很简单的,但是对于vue新手来说,我找了好几个网址都讲的不是很清楚,磕磕绊绊理清了关系,在这里总结一下。 首先,vuex...
  • 简单回顾cookie和sessioncookie和session都是回话管理的方式Cookiecookie是浏览器端存储信息的一种方式服务端可以通过响应浏览器set-cookie标头(header),浏览器接收到这个标头信息后,将以文件形式将cookie信息保存...
  • 2、登陆成功后保存token //保存登陆成功后的token到sessionStorage中 window.sessionStorage.setItem('token', res.token) 注:清理sessionStorage中的数据要调用的函数 //清空登陆token window.sessionStorage....
  • express框架与vue结合使用,无法保存session内容解决方案 问题重现: 使用express框架编写后端接口时,使用中间件判断用户是否登录,将登录信息保存至session中,登陆成功时该接口session能够获取到,访问其他界面...
  • 本地存储 isLogin 登录状态 并保存到vuex Header.vue <div class="content-login-success" v-if="isLogin"> <div style="cursor: pointer">我的课程</div> <div @mouseenter="isUserInfo ...
  • 最近做项目需要保存用户登录状态,要做到刷新页面用户状态不变,以及实现登出功能。实际上是很简单的,但是对于vue新手来说,我找了好几个网址都讲的不是很清楚,磕磕绊绊理清了关系,在这里总结一下。首先,vuex...
  • 项目场景: 知识产权模块 问题描述 需要获取登录时的用户名,在其他组件中使用。 解决方案: 1.绑定事件 <a-button size="default" type="primary" ... @click.stop.prevent="handleSubmit" ...登录
  • django+vue 登录验证和用户信息的保存

    千次阅读 2020-04-08 15:41:29
    login.vue this.$axios.get('/login/',{params:this.usernfo}).then((res)=>{ if(res.data.login=='fail'){ this.$notify.error({ title: '用户验证失败', message: '请检查登录名、核准码或者联系管理员!...
  • 4,存在安全隐患 LocalStorage与SessionStorage存储Token 如存入SessionStorage,在用户登录的时候,我们就需要将用户名id和token存入sessionStorge,在Vue中实现同样简单的,通过sessionStorage.setItem或者...
  • vuesession保存对象信息

    千次阅读 2020-08-20 14:53:02
    //保存 window.sessionStorage.setItem("list",JSON.stringify(this.list)); //获取 this.list= JSON.parse(window.sessionStorage.getItem("list));
  • 检查状态;如果有登录态则查询登录信息(uid,头像等...)并保存起来;如果没有则跳转到登录页;...登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功则提示用户不成功; 用户注销
  • 记录在vue3学习中遇到的问题以及解决方法 登录注册其实很简单,当然,如果在一开始不会的状态下还是很难想出的。 我们可以给登录和注册按钮加v-if进行判断,当我们处于未登录的时候,我们让他显示,参数为true,此时...
  • Vue项目中实现用户登录及token验证

    千次阅读 2022-06-16 15:03:42
    node.js+vue+jwt
  • Vue中跨域以及sessionId不一致问题解决方法

    万次阅读 多人点赞 2018-10-23 16:05:49
    如果登录时还需要图片验证码验证,首先需要请求获取验证码的接口,然后将验证码存入session中并返回给前端,登录时拿用户输入的验证码和session保存的验证码比较,这时会发现session中获取不到之前存入的验证码,...
  • 1、将登录成功后的token,保存到客户端的sessionStorage中 1.1 项目中除了登录之外的其他API接口,必须在登录后才能访问 1.2 token只应在当前网站打开期间生效,所以将token保存在sessionStotage中。 2、通过编程式...
  • 上篇文章中,我们讲了在 Spring Security 中如何踢掉前一个登录用户,或者禁止用户二次登录,通过一个简单的案例,实现了我们想要的效果。但是有一个不太完美的地方,就是我们的用户是配置在内存中的用户,我们没有...
  • 对于spring boot与Vue的系统使用session。假设session取不到问题 需要在Vue中的main.js添加 axios.defaults.withCredentials = true //携带cookie 设置session @RequestMapping("/login") public ResponseZZ ...
  • vue实现登录成功后对token的保存以及跳转到后台页面
  • // 第一种可能,你在退出登录的时候没有清空 vuex中的路由,在退出的方法中添加 logout() { // SET_ROUTERS 这个字段是你在vuex中自己定义的字段 this.$store.commit("SET_ROUTERS", ""); this.$router.push('/...
  • Vue中后端用户信息存储的三种方式

    千次阅读 2022-01-28 17:03:40
    2.使用localstore或sessionstore local长久 seesion 浏览器关闭就没了 localStorage.setItem() sessionStorage.setItem() 3.Vuex存储 在store文件的state中初始化token,因为state中的数据不支持直接修改,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,430
精华内容 3,372
热门标签
关键字:

vue用户登录保存session