localstorage

render里面要直接跳到某个页面要用return <Redirect to="/" /> 不用this.props.history.replace('/'); 因为render里面必定return this.props.history.replace用在点击回调事件里面 1.admin.js里面 <script> render() { //读取保存的user ,如果不存在直接跳转到登录页面 const user = JSON.parse(localStorage.getItem('user_key') || '{}') if (!user._id) { // this.props.history.replace('/login') //事件回调中使用 return <Redirect to="/login" /> } </script> 2.login.js里面 <script> if(res.code === '0000'){ //跳转到管理页面 const user = res.data localStorage.setItem('user_key',JSON.stringify(user)) //storageUtils.saveUser(user) 改进版 this.props.history.replace('/') message.success('登录成功')

拦截器 1.拦截路由 // 拦截器// 路由拦截// to去哪个路由，from 从哪里来，next下一步router.beforeEach((to,from,next)=>{ // 如果是去login1 if (to.path == '/login1'){ //进行下一步 next(); } else{ //如果localStorage有值 if (localStorage.getItem('user_id')) { next() //否则回login1 }else{ next('/login1') } }}) 最初的代码 我们进行优化 ，优化完 router.beforeEach((to, from, next) => { if (to.path == '/login1' || localStorage.getItem('user_id')) { next() } else { alert('请登录') next('/login1') }})优化完 看上去更精简 2拦截请求 axios.interceptors.request.use(function (hh) { if (!localStorage.getItem('user_id')){ router.path({ name:'/login1' }) } else{ hh.headers.user_id

父组件向子组件传值 <div id="app"> <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 --> <com1 v-bind:parentmsg="msg"></com1> </div> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '123 啊-父组件中的数据' }, methods: {}, components: { // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法 com1: { data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上； // data 上的数据，都是可读可写的； return { title: '123', content: 'qqq' } }, template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>', // 注意： 组件中的 所有 props 中的数据，都是通过

登录认证实现（springboot+vue） 1. 登录认证相关介绍 登录认证的整个过程有两个部分组成，分别是用户认证和权限认证。用户认证是对用户的相关登录认证，权限认证是对已经登录的用户的操作权限识别与限制。 用户认证：核对数据库用户名和密码的相关信息是否正确。 权限认证：查看用户是否具有相应的操作权限，例如：收到用户修改信息的请求，会首先判断用户是会否具有ROLE_DELETE权限，如果没有则告诉客户端没有访问权限。 2. 准备工作 2.1 服务端 spring boot，spring security，JWT或者redis，token 2.2 客户端 vuex，Storage（localstorage），token，router 3. 服务端 3.1 spring security spring security是一个基于spring aop 和servlet过滤器的安全框架。 详细介绍链接： https://www.w3cschool.cn/springsecurity/ 3.1.1 spring security的核心类 3.1.1.1 Authentication 用于用户信息认证，用户在进行登录认证之前会将用户的相关信息封装在一个Authentication的实现类中，在登录成功之后，又会将用户权限（ROLE_USER)封装到相关的Authentication实现类中

<p>             Js资源增量更新--seajs本地存储增量更新插件(storeinc)使用</p> <p>storeinc 是一个用来实现js代码本地存储化，并可以在js版本更新的时候，对js内容做增量更新的seajs插件。对于一个js文件来说，当js版本没有更新的时候，storeinc会从本地存储(localstorage)里读取js并解释执行，而当需要修改js内容时,storeinc则会只拉取新更新的js内容跟本地内容合并成新的js内容，更新的内容通过使用与storeinc配套的构建工具spm-storeinc-build来离线生成。另外storeinc还提供了一个java servlet来实现实时生成增量更新内容，如果使用了这个servlet则无需使用spm-storeinc-build来构建，只需要按这个servlet配置即可。</p> <p>Storeinc的增量更新的原理跟rsync有点像，算是一个rsync的js版了，不同的是rsync的增量更新单位用二进制来计算，storeinc则是字符为单位，具体的实现原理请看:<a href="https://github.com/luyongfugx/hcliuLoad/blob/master/hcliuLoad.ppt">https://github.com/luyongfugx/hcliuLoad/blob

需求： 项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在20G内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以20G来进行限制。 PC 端全平台支持，要求支持Windows,Mac,Linux 支持所有浏览器。 支持文件批量上传 支持文件夹上传，且要求在服务端保留层级结构。文件夹数量要求支持到10W。 支持大文件断点续传，要求刷新浏览器，重启浏览器，重启电脑后仍然能够继续上传。文件大小要求能够支持到20个G。 支持自动加载本地文件，要求能够自动加载指定的本地文件。 支持文件批量下载，要求不要在服务器打包。因为20G的文件在服务器打包时间比较长。 支持文件夹下载，要求不要在服务器打包，下载到本地后要求保留层级结构 文件列表面板支持路径导航，新建文件夹 一. 大文件上传基础描述： 　　各种WEB框架中，对于浏览器上传文件的请求，都有自己的处理对象负责对Http MultiPart协议内容进行解析，并供开发人员调用请求的表单内容。 比如： Spring 框架中使用类似CommonsMultipartFile对象处理表二进制文件信息。 而.NET 中使用HtmlInputFile/ HttpPostedFile对象处理二进制文件信息。 优点：使用框架内置对象可以很方便的处理来自浏览器的MultiPart二进制信息请求，协议分析操作不用开发人员参与。 缺点

cookie 2019 年 11 月 4 日 10:49 · cookie 是什么鬼 · 首先得先了解一下 HTTP( 超文本传输协议 ) HTTP 是一种无状态协议，即服务器不保留与客户交易 ( 会话 ) 时的任何状态 , 同一个客户端的这次请求和上次请求没有对应关系 , 它并不知道这两个请求来自同一个客户端 , 为了解决这个问题， Web 程序引入了 cookie 机制来维护状态。 ( 但 这 种健忘症似的毛病 , 大大减轻了服务器记忆负担，从而保持较快的响应速度 ) · 概念 : · cookie 是一种会话跟踪技术，是浏览器提供的一种机制 , 是存储于访问者计算机中的一小块数据 , 可以由 JavaScript 对其进行操作 ( 设置、读取、删除 ) , 其仅仅是浏览器实现的一种数据存储功能 会话：用户进入网站，开始浏览信息到关闭浏览器的过程，就称之为是一次会话 , 会话跟踪技术：浏览器和服务器之间在进行多次请求间共享数据的过程，就称为会话跟踪技术 cookie 由服务器生成，发送给浏览器，浏览器把 cookie 以 kv 形式保存到某个目录下的文本文件内，下一次请求同一网站时会把该 cookie 发送给服务器。 由于 cookie 是存在客户端上的，所以浏览器加入了一些限制确保 cookie 不会被恶意使用，同时不会占据太多磁盘空间，所以每个域的 cookie

如果有需要源代码，请猛戳 源代码 希望文章给大家些许帮助和启发，麻烦大家在GitHub上面点个赞！！！十分感谢 一、前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。组件间如何传递数据就显得至关重要。本文尽可能罗列出一些常见的数据传递方式，如props、 $emit / $on 和vuex以及新出的 $attrs / $listeners 和provide/inject，以通俗易懂的实例讲述这其中的差别，希望对小伙伴有些许帮助。 二、props 父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。具体实现方式请点击 Vue2.0学习(一)----父子组件间通信 prop是单向绑定的，当父组件的属性变化时，将传导给子组件，反之则不行， 而且不允许直接在一个子组件内部改变 prop，否则就会报错。那有时候如果我们想修改传递过来的prop,有以下办法： 方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据。 <div id="itany"> <h2>父组件:{{name}}</h2> <input type="text" v-model="name"> <my-hello :name="name"><

1 基于 local storage 实现的信息传递 相关插件 lsbridge.js https://github.com/krasimir/l... 且项目中有非常简单易懂的示例 你需要了解的一些关于LocalStorage的特性： 只有相同域名的页面才能互相读取 LocalStorage 每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样） LocalStorage 永久有效，除非用户主动清理缓存 localStorage只能存String类型的字符串 这种方案简单易用，且不需要后端的支持，但无论前端是使用哪种本地存储方式，都只能基于统一浏览器中使用，并且在某些数据量较大的可视化项目中这种方式其实不太适用，如果需要跨终端互动或者大数据量支持，则可以使用websocket实现。 2 websocket 关于websocket 的资料已经很多，这里就不多介绍。需要注意的问题就是做好用户控制。 已有案例： http://stage.moneplus.cn/ice/ ，手机扫描左上方二维码进入，摇动手机模拟冰块掉落，在pc 上面的杯子接入掉落的冰块 来源： https://www.cnblogs.com/homehtml/p/11803540.html

本文主要学习一下一些高级的HTTP知识，例如 Session LocalStorage Cache-Control Expires ETag 其实主要就是涉及到了 持久化存储与缓存的技术 在此之前已经学习了 Cookie 的 相关知识 ，但是 Cookie 有个缺点是可以人为修改，有一定的安全隐患。 所以，针对这个缺点，诞生了 Session Session 一般来说 Session 是基于Cookie实现的，它利用一个 sessionId 把用户的敏感数据隐藏起来，除非暴力穷举才有可能获得敏感数据。 sessionId 我们使用 Cookie 的时候，一般是服务器给用户一个响应头，设置 Cookie response.setHeader('Set-Cookie', 'sign_in_email=...;HTTPOnly') 既然Session还是基于 Cookie 实现的，那么还是应该在 Set-Cookie 上搞事情。 //预先在服务器端预留对象准备存储各种session let sessions = { } ... let sessionId = Math.random() * 100000 sessions[sessionId] = {sign_in_email: email} response.setHeader('Set-Cookie', `sessionId=$