一、场景描述:
根据用户的登录状态来实现不同的路由跳转,这个功能之前有写到用三目运算来实现。那么这个用户状态又怎么做呢,怎么在登录期间刷新页面而不丢失用户信息?首先想到Vuex作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。
二、解决思路:
将用户信息更新至vuex中并保存到local storage,这样页面刷新或者其他页面都可以读取到用户信息。
具体实现:
1 记录用户信息到local storage
- 1.登录状态所有页面都需要用到这个变量,所有采用vuex插件
// store/index.js
const state = {
userInfo: null, //用户信息
login: true,//是否登录
}
- 2.login.vue 登录页面
data(){
return {
userInfo: null, //获取到的用户信息
}
}
输入密码用户名信息调用后台接口,用userInfo接收返回信息
this.userInfo = await sendLogin(this.mobileCode, this.phoneNumber, this.validate_token);
console.log('登录', this.userInfo)
将用户状态userInfo保存到vuex中
methods: {
...mapMutations([
'RECORD_USERINFO',
])
}
Mutation 用于变更 Store中的userInfo数据
this.RECORD_USERINFO(this.userInfo);
- 3.store/mutation.js
import { setStore } from '../config/mUtils'
Mutation 用于变更 Store中 的数据。
// 记录用户信息
[RECORD_USERINFO](state, info) {
state.userInfo = info;
state.login = true;
setStore('user_id', info.user_id);
},
- 4 config/mUtils
localStorage 数据不受页面刷新影响,也不会关闭窗口、标签页或重启浏览器而丢失,如果只将用户信息保存到vuex中,那么刷新页面的时候数据就会丢失
/**
* 存储localStorage
*/
export const setStore = (name, content) => {
if (!name) return;
if (typeof content !== 'string') {
content = JSON.stringify(content);
}
window.localStorage.setItem(name, content);
}
2.2 从local storage读取信息存入到vuex
- 1.head.vue
<router-link :to="userInfo? '/profile':'/login'">
<svg class="user_avatar" v-if="userInfo"></svg>
<span class="login_span" v-else>登录|注册</span>
</router-link>
import {mapState,mapActions} from 'vuex'
export default {
mounted() {
//获取用户信息
this.getUserInfo();
},
computed: {
...mapState([
'userInfo'
]),
},
methods: {
...mapActions([
'getUserInfo'
]),
},
}
- 2 action.js
actions是用来封装一些异步行为或延时任务的结果操作来更新状态的。
import {getUser,getAddressList} from '../service/getData'
import {GET_USERINFO,SAVE_ADDRESS} from './mutation-types.js'
export default {
async getUserInfo({ commit, state }) {
let res = await getUser();
console.log('userinfo', res);
commit(GET_USERINFO, res)
},
没有登录时,打印信息如下:
status: 0, type: “GET_USER_INFO_FAIELD”, message: “通过session获取用户信息失败”
登录状态,打印如下:
- 3 getData.js
export const getUser = () => fetch('/v1/user', { user_id: getStore('user_id') });
- 4 config/mUtils
通过local Storage对象的方法取得用户数据
/**
* 获取localStorage
*/
export const getStore = name => {
if (!name) return;
return window.localStorage.getItem(name);
}
- 5 mutation.js
//获取用户信息存入vuex
[GET_USERINFO](state, info) {
if (state.userInfo && (state.userInfo.username !== info.username)) {
return;
};
if (!state.login) {
return
}
if (!info.message) {
state.userInfo = {...info };
} else {
state.userInfo = null;
}
},
三 、实现:
user_id:64276存储到ocal storage中
登录状态时跳转到profile,并且此时刷新都可以读取到用户信息不会变为默认值!
四、小结
-
选择合适的浏览器存储
localStorage – 是永久存储在本地,除非你主动去删除;
sessionStorage – 是存储到当前页面关闭为止,和其他tab页没关联;
cookie – 则根据你设置的有效时间来存储,但缺点是不能储存大数据且不易读取,会和后台进行交互。 -
本方法选择的是localStorage
选择的原因是sessionStorage可以保证打开页面时想读取上一次打开页面的数据。