电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

解決vue刷新頁面以后丟失store的數據問題

瀏覽:90日期:2022-12-09 17:40:48

刷新頁面時vue實例重新加載,store就會被重置,可以把定義刷新前把store存入本地localStorage、sessionStorage、cookie中,localStorage是永久儲存,重新打開頁面時會讀取上一次打開的頁面數據,sessionStorage是儲存到關閉為止,cookie不適合存大量數據。根據我的需求,最合適的是sessionStorage。

beforeunload在頁面刷新時觸發,可以監聽這個方法,讓頁面在刷新前存store到sessionStorage中。

當然,在頁面刷新時還要讀取sessionStorage中的數據到store中,讀取和儲存都寫在app.vue中。

export default { name: ’app’, created () { // 在頁面加載時讀取sessionStorage if (sessionStorage.getItem(’store’)) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem(’store’)))) } // 在頁面刷新時將store保存到sessionStorage里 window.addEventListener(’beforeunload’, () => { sessionStorage.setItem(’store’, JSON.stringify(this.$store.state)) }) }}

補充知識:vue項目將token存在(vuex)store和localstorage中

一、準備工作和token

1、準備工作

了解(session,cookie)token

Token的引入:Token是在客戶端頻繁向服務端請求數據,服務端頻繁的去數據庫查詢用戶名和密碼并進行對比,判斷用戶名和密碼正確與否,并作出相應提示,在這樣的背景下,Token便應運而生。

token 是在服務端產生的一串字符串,以作客戶端進行請求的一個令牌。如果前端使用用戶名/密碼向服務端請求認證,服務端認證成功,那么在服務端會返回 Token 給前端。前端可以在每次請求的時候帶上 Token 證明自己的合法地位。如果這個 Token 在服務端持久化(比如存入數據庫),那它就是一個永久的身份令牌(除非設置了有效期)。

token 優點

Token 完全由應用管理,所以它可以避開同源策略

Token 可以避免 CSRF 攻擊

Token 可以是無狀態的,可以在多個服務間共享

減輕服務器的壓力,減少頻繁的查詢數據庫,使服務器更加健壯。

安裝vuex

cnpm install vuex --save

2、介紹token用法

在前后端完全分離的情況下,Vue項目中實現token驗證大致思路如下:

1、第一次登錄的時候,前端調后端的登陸接口,發送用戶名和密碼

2、后端收到請求,驗證用戶名和密碼,驗證成功,就給前端返回一個token

3、前端拿到token,將token存儲到localStorage和vuex中,并跳轉路由頁面

4、前端每次跳轉路由,就判斷 localStroage 中有無 token ,沒有就跳轉到登錄頁面,有則跳轉到對應路由頁面

5、每次調后端接口,都要在請求頭中加token

6、后端判斷請求頭中有無token,有token,就拿到token并驗證token,驗證成功就返回數據,驗證失敗(例如:token過期)就返回401,請求頭中沒有token也返回401

7、如果前端拿到狀態碼為401,就清除token信息并跳轉到登錄頁面

二、創建storage,store,request

1、src目錄:

解決vue刷新頁面以后丟失store的數據問題

注:創建storage是可選的,因為我把localstorage(緩存)封裝到了storage.js(本文后續代碼均是用自己封裝的js);創建store是必須的!

2、創建storage(可選)

// 封裝操作localstorage本地存儲的方法 模塊化var storage = { set(key, value) { localStorage.setItem(key, JSON.stringify(value)); // localStorage.key = value; // localStorage[key] = value; }, get(key) { return JSON.parse(localStorage.getItem(key)); }, getForIndex(index) { return localStorage.key(index); }, getKeys(){ let items = this.getAll(); let keys = []; for (let index=0;index<items.length;index++){ keys.push(items[index].key); } return keys; }, getLength() { return localStorage.length; }, getSupport() { return (typeof (Storage) !== 'undefined') ? true : false; }, remove(key) { localStorage.removeItem(key); }, removeAll() { localStorage.clear(); }, getAll() { let len = localStorage.length; // 獲取長度 let arr = new Array(); // 定義數據集 for (var i = 0; i < len; i++) { // 獲取key 索引從0開始 var getKey = localStorage.key(i); // 獲取key對應的值 var getVal = localStorage.getItem(getKey); // 放進數組 arr[i] = {’key’: getKey,’val’: getVal, } } return arr; }}export default storage;

3、創建store

import Vue from ’vue’import Vuex from ’vuex’import storage from ’@/model/storage’Vue.use(Vuex);// 用Vuex.Store對象用來記錄tokenconst store = new Vuex.Store({ state: { // 存儲token // token: storage.get(’token’) ? storage.get(’token’) : ’’, token:'', userName:'' // 可選 }, actions: { // removeToken: () => { // context.commit(’set_token’) // } }, // 計算屬性 mutations: { // 修改token,并將token存入localStorage set_token(state,token) { state.token = token; storage.set(’token’, token); console.log(’store、localstorage保存token成功!’); }, del_token(state) { state.token = ''; storage.remove('token'); }, // 可選 setUserInfo(state, userName) { state.userName = userName; } }});export default store;

4、創建request

import axios from ’axios’import store from ’@/store’import router from ’@/router’// create an axios instanceconst service = axios.create({ // index.js設置了代理(解決跨域) invoice = http://58.246.79.142:25005 baseURL: '/invoice', // url = base url + request url timeout: 5000, // request timeout }})//添加請求攔截器,若token存在則在請求頭中加token,不存在也繼續請求service.interceptors.request.use( config => { // 每次發送請求之前檢測都vuex存有token,那么都要放在請求頭發送給服務器,沒有則不帶token // Authorization是必須的 if (store.state.token) { config.headers.Authorization = store.state.token; } return config; }, error => { console.log('在request攔截器顯示錯誤:', error.response) return Promise.reject(error); });//respone攔截器service.interceptors.response.use( response => { // 在status正確的情況下,code不正確則返回對應的錯誤信息(后臺自定義為200是正確,并且將錯誤信息寫在message),正確則返回響應 return response.data.code == 200 ? response : Promise.reject(response.data.message); }, error => { // 在status不正確的情況下,判別status狀態碼給出對應響應 if (error.response) { console.log('在respone攔截器顯示錯誤:', error.response) switch (error.response.status) {case 401: //可能是token過期,清除它 // this.$store.commit('del_token'); store.commit('del_token'); router.replace({ //跳轉到登錄頁面 path: ’/login’, // 將跳轉的路由path作為參數,登錄成功后跳轉到該路由 query: { redirect: router.currentRoute.fullPath } }); } } return Promise.reject(error.response.data); });export default service

三、配置代理,封裝路由router、設置路由守衛,在main.js中引入router

一、配置代理

解決vue刷新頁面以后丟失store的數據問題

二、封裝路由router,并設置路由守衛

/* eslint-disable */import Vue from ’vue’import Router from ’vue-router’import Main from ’@/main/index’import store from ’@/store’import storage from ’@/model/storage’Vue.use(Router)const routes = [ { path: ’/’, name: ’Main’, redirect: ’/login’, // 某些頁面規定必須登錄后才能查看 ,可以在router中配置meta,將需要登錄的requireAuth設為true, meta: { requireAuth: true, } }, { path: ’/login’, component: () => import(’@/views/login’), }, { path: ’/invoice’, redirect: ’/invoice’, component: Main, }, ] }, { path: ’*’, component: Main }]const router = new Router({ routes: routes })// 設置路由守衛,在進頁面之前,判斷有token,才進入頁面,否則返回登錄頁面if (storage.get('token')) { store.commit('set_token', storage.get('token'));}router.beforeEach((to, from, next) => { // 判斷要去的路由有沒有requiresAuth // to.matched.some(r => r.meta.requireAuth) or to.meta.requiresAuth if (to.matched.some(r => r.meta.requireAuth)) { if (store.state.token) { next(); //有token,進行request請求,后臺還會驗證token } else { next({ path: '/login', // 將剛剛要去的路由path(卻無權限)作為參數,方便登錄成功后直接跳轉到該路由,這要進一步在登陸頁面判斷 query: { redirect: to.fullPath } }); } } else { next(); //如果無需token,那么隨它去吧 }});export default router

三、在main.js中引入router

import Vue from ’vue’// import Vuex from ’vuex’import App from ’./App’import router from ’./router’import ElementUI from ’element-ui’;import ’element-ui/lib/theme-chalk/index.css’// import VueResource from ’vue-resource’// import axios from ’axios’// 兼容ie// import ’babel-polyfill’;Vue.use(ElementUI);// Vue.use(Vuex);// Vue.use(VueResource);// Vue.use(axios);Vue.config.productionTip = falseVue.component(CollapseTransition.name, CollapseTransition)// this.$ajax 全局使用axios// Vue.prototype.$ajax=axios;new Vue({ el: ’#app’, router:router, components: { App }, template: ’<App/>’})

四、登錄頁面實際使用

只給出表單提交示例函數和依賴js

import { postLogin } from '@/api/login';submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { let that = this; // console.log(’username’,this.loginForm.username) // 通過校驗規則后進入校驗用戶名密碼是否正確 postLogin(this.loginForm.username, this.loginForm.password) .then(res => { console.log(res); that.$store.commit('set_token', res.data.token);that.$store.commit('setUserInfo', res.data.account); this.$notify({title: '登錄成功',type: 'success',showClose: false,duration: 1000 }); setTimeout(() => {// 此時要判斷/login后面的參數,若無參數,進入主頁;this.$router.push('/index');// 若有參數則參數為未有權限的那個路由,跳轉到那個路由// this.$router.push(***); -- 具體要自己在這實現 }, 1000); }) .catch(error => { // 錯誤分為 status-請求錯誤 和 code-賬號密碼錯誤 this.$message.error(error); console.log(error); }); } else { // 不符合前端校驗 this.$message.error(’format error:’+error); console.log(’format error:’,error); return false; } }); }

上面依賴的@/api/login:

import request from ’@/utils/request.js’export function postLogin(account,password) { console.log(account,password) return request({ url: ’/login’, method: ’post’, params:{ // 具體傳參(鍵)要看后臺要求 account:account, password:password } })}

以上這篇解決vue刷新頁面以后丟失store的數據問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 广西绿桂涂料--承接隔热涂料、隔音涂料、真石漆、多彩仿石漆等涂料工程双包施工 | 英国雷迪地下管线探测仪-雷迪RD8100管线仪-多功能数字听漏仪-北京迪瑞进创科技有限公司 | 塑胶跑道施工-硅pu篮球场施工-塑胶网球场建造-丙烯酸球场材料厂家-奥茵 | 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 手机存放柜,超市储物柜,电子储物柜,自动寄存柜,行李寄存柜,自动存包柜,条码存包柜-上海天琪实业有限公司 | 北京开业庆典策划-年会活动策划公司-舞龙舞狮团大鼓表演-北京盛乾龙狮鼓乐礼仪庆典策划公司 | 风化石头制砂机_方解石制砂机_瓷砖石子制砂机_华盛铭厂家 | 广西教师资格网-广西教师资格证考试网 | 广东高华家具-公寓床|学生宿舍双层铁床厂家【质保十年】 | 石油/泥浆/不锈钢防腐/砂泵/抽砂泵/砂砾泵/吸砂泵/压滤机泵 - 专业石油环保专用泵厂家 | 扫地车厂家-山西洗地机-太原电动扫地车「大同朔州吕梁晋中忻州长治晋城洗地机」山西锦力环保科技有限公司 | 河南mpp电力管_mpp电力管生产厂家_mpp电力电缆保护管价格 - 河南晨翀实业 | 路面机械厂家| 汽车润滑油厂家-机油/润滑油代理-高性能机油-领驰慧润滑科技(河北)有限公司 | 高温链条油|高温润滑脂|轴承润滑脂|机器人保养用油|干膜润滑剂-东莞卓越化学 | 上海平衡机-单面卧式动平衡机-万向节动平衡机-圈带动平衡机厂家-上海申岢动平衡机制造有限公司 | 阻垢剂,反渗透阻垢剂,缓蚀阻垢剂-山东普尼奥水处理科技有限公司 真空粉体取样阀,电动楔式闸阀,电动针型阀-耐苛尔(上海)自动化仪表有限公司 | 专注提供国外机电设备及配件-工业控制领域一站式服务商-深圳市华联欧国际贸易有限公司 | 上海办公室设计_办公楼,写字楼装修_办公室装修公司-匠御设计 | 耐高温硅酸铝板-硅酸铝棉保温施工|亿欧建设工程 | 无菌实验室规划装修设计-一体化实验室承包-北京洁净净化工程建设施工-北京航天科恩实验室装备工程技术有限公司 | 净化车间装修_合肥厂房无尘室设计_合肥工厂洁净工程装修公司-安徽盛世和居装饰 | 电子天平-华志电子天平厂家| 南京办公用品网-办公文具用品批发-打印机耗材采购 | 对夹式止回阀厂家,温州对夹式止回阀制造商--永嘉县润丰阀门有限公司 | 太空舱_民宿太空舱厂家_移动房屋太空舱价格-豪品建筑 | 筒瓦厂家-仿古瓦-寺庙-古建琉璃瓦-宜兴市古典园林建筑陶瓷厂有限公司 | 欧洲MV日韩MV国产_人妻无码一区二区三区免费_少妇被 到高潮喷出白浆av_精品少妇自慰到喷水AV网站 | 潜水搅拌机-双曲面搅拌机-潜水推进器|奥伯尔环保 | 媒介云-全网整合营销_成都新闻媒体发稿_软文发布平台 | 低噪声电流前置放大器-SR570电流前置放大器-深圳市嘉士达精密仪器有限公司 | 钢托盘,铁托盘,钢制托盘,镀锌托盘,饲料托盘,钢托盘制造商-南京飞天金属13260753852 | 螺旋绞龙叶片,螺旋输送机厂家,山东螺旋输送机-淄博长江机械制造有限公司 | 火锅底料批发-串串香技术培训[川禾川调官网] | 沈阳建筑设计公司_加固改造设计_厂房设计_设计资质加盟【金辉设计】 | 真空粉体取样阀,电动楔式闸阀,电动针型阀-耐苛尔(上海)自动化仪表有限公司 | 中山市派格家具有限公司【官网】 | PTFE接头|聚四氟乙烯螺丝|阀门|薄膜|消解罐|聚四氟乙烯球-嘉兴市方圆氟塑制品有限公司 | 十二星座查询(性格特点分析、星座运势解读) - 玄米星座网 | 招商帮-一站式网络营销服务|互联网整合营销|网络推广代运营|信息流推广|招商帮企业招商好帮手|搜索营销推广|短视视频营销推广 | 考勤系统_考勤管理系统_网络考勤软件_政企|集团|工厂复杂考勤工时统计排班管理系统_天时考勤 |