admin 管理员组文章数量: 1087652
vuex路由守卫的坑
在分模块保存时，我会使用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"];
自己记录一下，如果对大家有帮助，荣幸之至
本文标签： vuex路由守卫的坑
版权声明：本文标题：vuex路由守卫的坑 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700323803a396931.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论