精华内容
下载资源
问答
  • 实际上是很简单的,但是对于vue新手来说,我找了好几个网址都讲的不是很清楚,磕磕绊绊理清了关系,在这里总结一下。 首先,vuex安装完成之后,构建如下目录: vuex目录结构 这样做的目的是降低代码的耦合度,...

    https://www.jianshu.com/p/b2b634c77502

    最近做项目需要保存用户登录状态,要做到刷新页面用户状态不变,以及实现登出功能。实际上是很简单的,但是对于vue新手来说,我找了好几个网址都讲的不是很清楚,磕磕绊绊理清了关系,在这里总结一下。

    首先,vuex安装完成之后,构建如下目录:

    vuex目录结构

    这样做的目的是降低代码的耦合度,方便以后的修改与维护。

    然后,vuex中几个文件详情如下:

     

    store.js

    在store.js中目前保存三个数据,一个是当前用户,一个是判断当前用户是否已经登录,最后一个是保存用户登录后持有的token。实际上token也可以不保存在vuex中,因为vuex是一个状态管理器而非一个存储工具。我在axios的headers里是直接用的sessionStorage里的token。

    getters.js

     

    mutations.js

     

    actions.js

    接下来,在用户登录的时候,我们就需要将用户名和token存放入sessionStorge,再由sessionStorage传入vuex中。

     

    如上图,在登录成功之后,执行红框中的两个操作,就实现了上述的功能。vuex的dispatch和commit方法是有区别的,这个区别下一篇我们再详细讲。sessionStorage的setItem和getItem是一对,语义上就可以理解用法,不多说。将用户名放入vuex,调用setUser即执行actions.js中的方法来改变状态,则进入mutations.js中的userStatus方法,最终实现改变store.js中的三个状态。

    那么其实到这里,已经实现了将用户的状态,即用户名和token放入sessionStorage中的要求了。

    下一个问题是,在刷新页面的时候,如何获取这个状态呢?

     

    未登录状态

    已登录状态

    首先要知道,vuex中的状态一旦页面刷新,就不再存在。所以为了实现在刷新页面时,仍然展现出用户头像,就需要从sessionStorage种提取状态再传值给vuex。

     

    html代码

     

    computed里的isLogin()

    每当刷新页面的时候,就会从sessionStorage中查询是否有userName和token的存在,如果存在,则改变vuex中的isLogin,即用户状态,最后return一个isLogin()。这样就实现了保存用户登录信息的功能。

    最后,再来说说登出功能。要明白一个逻辑,用户登录之后,如果再次回到登录界面,必然是执行了登出操作。所以直接在login.vue里加一个路由控制就可以了。

     

    login的组建内守卫

    登出也就是将sessionStorage里的userName和token清空,就不多说了。

    这篇博客还有比较多不足的地方,欢迎大家指正。

    2018/12/11 补充:

    之前一段时间面临大四找工作, 偶尔登录简书看一下。 留言看到很多初学者还是不明白代码怎么写, 在这里贴出我gitee这个项目地址。首先这是我第一个vue项目, 有很多不成熟的地方, 而且后台接口现在已经关闭,所以我屏蔽了ip地址和端口号, 现在给出地址, 不会的旁友们可以自己去看。

    https://gitee.com/beautzy/mooc


     

    展开全文
  • Vue 使用 vue-cookies和vue-session

    万次阅读 2019-05-17 10:33:18
    一、Vue中使用vue-session 1.npm 安装 vue-session npm install vue-session 2.在main.js中引入 import VueSession from 'vue-session' Vue.use(VueSession) 3.使用 this.$session.set("key",value); //存...

    一、Vue中使用 vue-session

    1.npm 安装  vue-session

    npm install vue-session

    2.在main.js中引入

    import VueSession from 'vue-session'
    Vue.use(VueSession)

    3.使用

     this.$session.set("key",value); //存session
     this.$session.get("key"); //获取session

    二、Vue中使用vue-cookies

    1.npm  安装 vue-cookies

    npm install vue-cookies --save

    2.在main.js中引入

    import VueCookies from 'vue-cookies'
    Vue.use(VueCookies);

    3.使用

     this.$cookies.set("key",value); //存cookies
     this.$cookies.get("key"); //获取cookies

    4.注意:如果想在cookies和session中存入的是对象是,需要先转换为json字符串

     

    来源:https://www.npmjs.com/package/vue-cookies

               https://www.npmjs.com/package/vue-session

    展开全文
  • VUE每次请求Session丢失

    千次阅读 2019-09-04 16:22:45
    (前端VUE)request请求将个人用户放入请求的Session中,传入前端之后回到后端Session消失,联调需要先解决跨域问题,前端可以采用Jsonp或者代理方式解决跨域,后端采用@CrossOrigin方式解决跨域,其中请求路径不能...

    (前端VUE)request请求将个人用户放入请求的Session中,传入前端之后回到后端Session消失,联调需要先解决跨域问题,前端可以采用Jsonp或者代理方式解决跨域,后端采用@CrossOrigin方式解决跨域,其中请求路径不能填写*,然后继续说Session消失问题,原来是经过前端Cookie重新new了一个,并没有传递回来。

    展开全文
  • vue跨域的session问题

    千次阅读 2017-09-19 10:48:06
    vue跨域的session问题在开发vue2项目的时候遇到了session一直被重置的问题,发现是跨域引起的,简单的说就是前端的服务和后台的服务的session不能同步起了冲突。解决方案在webpack.dev.config.js做如下配置,原理...

    vue跨域的session问题

    在开发vue2项目的时候遇到了session一直被重置的问题,发现是跨域引起的,简单的说就是前端的服务和后台的服务的session不能同步起了冲突。


    解决方案

    在webpack.dev.config.js中做如下配置(主要是proxy的onProxyRes方法,其他配置仅做参考),原理是直接修改JSESSIONID的Path为/,使其保持一致。

        devServer: {
            contentBase: "./",
            hot: true,
            open: true,
            compress: true,
            port: 8000,
            proxy: {
                '/api': {
                    // 接口代理
                    target: `http://test.hz-huanshi.com/`,
                    changeOrigin: true,
                    secure: false,
                    pathRewrite: {
                        '^/api': ''
                    },
                    onProxyRes(proxyRes, req, res) {
                        var cookies = proxyRes.headers['set-cookie']
                        if (cookies == null || cookies.length == 0) {
                            delete proxyRes.headers['set-cookie']
                            return
                        }
                        for (var i = 0,n = cookies.length; i < n; i++) {
                            if(cookies[i].match(/^JSESSIONID=[^;]+;[\s\S]*Path=\/[^;]+/)){
                                cookies[i] = cookies[i].replace(/Path=\/[^;]+/,'Path=/');
                            }
                        }
    
                        proxyRes.headers['set-cookie'] = cookies;
                    }
                },
                historyApiFallback: true
            }
        }
    展开全文
  • django后端传给前段一个json对象,vue接收后如何保存在session中,并且可以在其他的页面从session中拿出对象,用这个对象里面的属性 后端传值 以上是django项目,后端返回给前段的一个json对象 前段获取 利用 JSON....
  • 开发环境前后端分离端口号不同导致跨域问题,跨域请求时,每次axios请求都是新的session,而不是刚才登陆时服务器保存的session,所以显示未登录 解决方法 使用axios发送请求时必须携带Cookie给服务器 一. vue项目...
  • vue中session的存取用法

    千次阅读 2020-03-21 21:33:02
    存的方法 sessionStorage.setItem(“username(起一个名字为了取得时候用)”, this.value(这个是你要存进去的数据)); 取的方法 你可以定义一个变量然后去取他 this.(你取名的变量) = sessionStorage.getItem(...
  • Chrome调试时跨站不能设置cookie问题 this set-cookie didn't specify a "SameSite" attribute,然后变成默认Lax。 然后我搜索了一下Samesite定义,有三个值,None, Lax,Strict.... ...找了一下怎么关闭chrome的这个...
  • //2在app.js(你需要运行的node文件)导入 const express = require('express') const session = require('express-session') const app = express() //3服务端设置允许跨域cors的中间件 app...
  • Express+Vue+axios在前后端分离的项目中使用Session前言Session简介搭建带有Session功能的后端服务器搭建前端服务器跨域资源共享问题在axios中传cookie小结源代码 前言 当今流行的网页开发模式是前后端分离的开发...
  • VUE向后台发送cookie包含session信息, 需要在requset.js如下设置: importaxiosfrom'axios' axios.defaults.withCredentials=true //创建axios实例 constservice=axios.create({ withCredentials:true, ...
  • vuesession封装

    千次阅读 2019-01-20 15:15:30
    vuesession封装 import Vue from 'vue' const setSession = (key, value) =&gt; { value = JSON.stringify(value) sessionStorage.setItem(key, value) } const getSession = key =&gt; { if (key ==...
  • Vue中跨域以及sessionId不一致问题解决方法

    万次阅读 多人点赞 2018-10-23 16:05:49
    如果登录时还需要图片验证码验证,首先需要请求获取验证码的接口,然后将验证码存入session中并返回给前端,登录时拿用户输入的验证码和session中保存的验证码比较,这时会发现session中获取不到之前存入的验证码,...
  • 1.npm install axios 2.设置请求头允许携带cookid
  • 主要介绍了Vue使用axios引起的后台session不同操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue express-session踩坑(设置session后每次请求都刷新问题(无法记录登录状态问题)) 首先先定义你的session app.use(session({ secret:"chh", cookie:{ maxAge:60*1000*30, secure:false }, resave:false,...
  • vue 获取HTTP Session传值后端

    万次阅读 2018-12-27 15:52:57
    在main.js里new vue 前写下 axios.defaults.withCredentials = true HTTP Session 值在浏览器 --设置--高级--内容设置--cookie--查看所有cookie与网站数据--里请求的地址里   其中内容为加密内容,是base64...
  • Vue 如何监听session值的变化

    千次阅读 2020-01-18 11:29:45
    如何监听session值的变化 首先在在main.js给Vue.protorype注册一个全局方法 //main.js Vue.prototype.resetSetItem = function (key, newVal) { if (key =='collapse') { // 创建一个StorageEvent事件 var ...
  • vue获取session中的值

    万次阅读 2019-09-09 18:30:50
    letmyName=JSON.parse(sessionStorage.getItem("userInfo"));
  • ssm架构和vue的创建这里就不介绍了,主要分析vue跨域调用ssm。 1.普通spring boot项目整合vue很方便,只需配置vue的src目录下config下的index.js文件如下: module.exports = { dev: { // Paths 后端跳转...
  • vue session

    2021-07-19 11:35:26
  • 但是在与前端对接时,出现了每次请求session不一致的问题,后面找到了解决方案: 前端加上: axios.defaults.withCredentials = true; 后端加上跨域配置(加在网关层): private CorsConfiguration ...
  • 但在实验时发现,由于前后端分离项目存在跨域问题,session不再相同,通过输出 sessionId也可以看出,不同请求到达服务端时sessionId是不同的,故需要考虑如何解决Session不一致的问题。 正文 CORS 首先简单讲下CORS...
  • vue axios无法发送session

    2020-07-02 09:45:15
    后发现是vue中axiox限制了session的返回,需要在create加入解开注释 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url withCredentials: true, // ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,300
精华内容 6,920
关键字:

vue中使用session

vue 订阅