在分模块保存时,我会使用store进行保存,
在前端进行路由保护时,如果用户没有登录,就跳转到登录页面,这是一个基础功能,以前的的写法
(1)新建一个store的模块,
export default {
namespaced: true,
state: {
//用于存储数据
name: "user:zhangsan",
userInfo:{
id:0,
} //保存登录信息
},
mutations: {
//用于执行相应的操作,在调用commit时执行,只有在commit时,才会自动调用对应的方法
changeName(state, value) {
//修改Name的值函数,需要调用
console.log("修改Name的值");
state.name = value;
},
changeUserInfo(state, value) {
//修改Name的值函数,需要调用
console.log("修改UserInfo的值");
state.userInfo = value;
},
},
}
在store引入并使用
import { createStore } from 'vuex' //导入vuex
import userStore from './models/user.state'//引入ts文件
import empStore from './models/emp.state'
//创建存储对象
const store = createStore({
modules: {// 模块化处理
userStore,//注册,注册的名称就是命名空间
empStore,
}
})
//向外输出对象(暴露对象)
export default store
路由守卫的代码段
以前的写法
//守护代码
//在跳转前执行
router.beforeEach((to,from,next)=>{
// to 到哪个页面去
// from 从哪个页面来
// next 只有执行了next方法,才可以跳转到对应的页面(路由)
//判断用户是否登录
//console.log("store",store.state.uInfo.userInfo);
const uInfo = store.state.uInfo.userInfo;//做actions中一个假的登录功能,
if (!uInfo.userAccount) {
if (to.path === "/login" || to.path === "/regist" ) {
//如果是跳转到登录页或注册页,直接放行
next();
return;
}
next("/login");
}else{
next();//登录了,直接通过
}
});
现在的写法
router.beforeEach((to,from,next)=>{
//to到哪一个路由,from从哪一个路由来的,next是否调用下一个路由
//获得存储中变量,判断这个值是否存在,如果存在,说明已经登录成功了,如果不存在,如果路由是‘/login’,或者‘/register’,放过
let userInfo = store.state["userStore"]["userInfo"];
//if(!userInfo.userName ){ 最好不要使用字符串类型,进行判断,会时灵时不灵,用数字比较稳定性较好
if(userInfo.id > 0 ){
next();//通过
}else{
//再次判断是否,登录或注册
if (to.path === "/login" || to.path === "/regist" ) {
//如果是跳转到登录页或注册页,直接放行
next();//通过
return;
}
next("/login");//跳转到登录
}
})
重点是
const uInfo = store.state.uInfo.userInfo;//做actions中一个假的登录功能,
以前是可以写的,现在在vscode中报错,虽然已经把ts的语法配置改成了非严格型,但是编译仍然报错,通过控制台输出对象,对象是存在的,就是不能编译通过,郁闷。
使用下面的写法就可以,
let userInfo = store.state["userStore"]["userInfo"];
自己记录一下,如果对大家有帮助,荣幸之至