极客观点
项目管理
HarmonyOS
目前实现的效果:
1.刷新 和 跳转任何页面都会跳到登录页面
2.路由拦截屏蔽后,刷新页面vuex里的数据都消失了
问题:
1.设置路由拦截后,实现了不登录全跳转至登录页面,但是刷新也都跳转到登录页面
2.路由拦截屏蔽后,刷新页面vuex里的数据都消失了,知道可以存在localStorage,但是具体的怎么实现呢?
3.用户数据少可以存在localStorage里,但是主页的所有数据就不少了,难道也存在里面吗?
4.可不可以让刷新页面和路由拦截结合起来,刷新页面再请求用户数据和当前页面的数据,具体怎么实现?
最终实现结果:刷新后依然保持在当前页面,并且数据不消失
代码:
index
import Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters';
import actions from './actions';
import mutations from './mutations';
Vue.use(Vuex);
const state = {
token: '',
isLogin: false, // 用户是否登录
userInfo: { // 用户信息
id: '', // 用户id
name: '', // 用户名字
deptId: '', //
realName: '', // 用户真实名字
avatar: '', // 用户头像
roles: '', // 用户权限
}
};
const store = new Vuex.Store({
state,
getters,
actions,
mutations
});
export default store;
mutations
export const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_ISLOGIN: (state, isLogin) => {
state.isLogin = isLogin
},
SET_ID: (state, id) => {
state.userInfo.id = id
},
SET_NAME: (state, name) => {
state.userInfo.name = name
},
SET_DEPTID: (state, deptId) => {
state.userInfo.deptId = deptId
},
SET_REALNAME: (state, realName) => {
state.userInfo.realName = realName
},
SET_AVATAR: (state, avatar) => {
state.userInfo.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.userInfo.roles = roles
},
};
export default mutations;
actions
import { login, logout, getUserInfo } from '@/api/api'
export const actions = {
// 登录
Login({ commit }, userInfo) {
return new Promise((resolve, reject) => {
login(userInfo).then(response => {
let token = response.data.token;
localStorage.setItem('token', token);
commit('SET_TOKEN', token);
commit('SET_ISLOGIN', true);
resolve()
}).catch(error => {
reject(error)
})
})
},
// 获取用户信息
GetUserInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getUserInfo(state.token).then(response => {
if (!response.data) {
reject('error')
}
let data = response.data;
console.log(response.data);
commit('SET_ID', data.Id);
commit('SET_NAME', data.Name);
commit('SET_DEPTID', data.DeptId);
commit('SET_REALNAME', data.RealName);
commit('SET_AVATAR', data.Face);
commit('SET_ROLES', data.Roles);
resolve(response)
}).catch(error => {
reject(error)
})
})
},
// 登出
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '');
commit('SET_ISLOGIN', false);
localStorage.removeItem('token');
resolve()
}).catch(error => {
reject(error)
})
})
},
};
export default actions;
main.js
import Vue from 'vue';
import iView from 'iview';
import App from './App';
import 'iview/dist/styles/iview.css';
import router from './router';
import store from './store';
import { getUserInfo } from '@/api/api'
Vue.config.productionTip = false
Vue.use(iView);
// 路由拦截
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
if (!store.state.isLogin && to.path !== '/login') {
next({
path: '/login',
})
} else {
next();
}
}
else {
next();
}
});
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
});
使用把登录状态储存在sessionStorage中方法解决的,链接描述