项目实战day6

今天药忘吃喽~ 2023-01-01 03:51 293阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  1.路由拦截的处理

--------------------

# 1.路由拦截的处理 #

//分析
    // 当前是否在登录页面 =>在=>放行
    // 不在登录页面 =>没有登录或者已经登录了的
    // 已经登录(有角色信息的) =>放行
    // 没有登录 => 获取角色信息(发送请求获取)
    // 获取不到(获取失败,即直接访问其他页面) =>返回登录页
    
    router.beforeEach(async (to, from, next) => { 
        //判断当前是否在登录页面
        if (to.path == '/login') { 
            // 如果在=>放行
            // console.log('在登录页,直接放行');
            next();
        }
        //如果不在
        else { 
            // 判断是否有角色信息(因为有可能是已经登录进来的了) 看是否能在store中获取到角色信息
            var R = store && store.getters.roles && store.getters.roles > 0;
            console.log(R);
            if (R) { 
                //有角色 => 放行
                // console.log('有角色');
                next();
            }
            //没有角色呢?
            else { 
                // 没有就获取角色
                //获取角色 通通actions 发送请求获取 await需要获取到角色后在进行下面操作
                var {  roles } = await store.dispatch('userInfo');
                console.log(roles);
                //若是获取到角色
                if (roles) { 
                    console.log(to);
                    console.log('有角色信息呀');
                    next();
                }
                //若是获取不到角色
                else { 
                    // console.log('无角色信息,返回登录页');
                    //无角色信息,返回登录页
                    next({  path: '/login' })
                }
            }
        }
    })

import Vue from 'vue'
    import Vuex from 'vuex'
    import {  userInfo, logout } from '@/api/interface'
    
    Vue.use(Vuex)
    
    const state = { 
        //存储角色信息的
        roles: []
    };
    const getters = { 
        //获取state中roles
        roles: state => state.roles
    };
    const mutations = { 
        //同步的mutations 专门用于修改state中的状态
        //data就是actions中data中获取的角色信息的
        setRoles: (state, data) => state.roles = data
    
    };
    const actions = { 
        //异步的 通过$store.dispath('actions名字')获取
        //登录
        userInfo({  commit }) { 
            return new Promise((resolve, reject) => { 
                //发送请求获取角色信息(用户详情)
                userInfo().then(res => { 
                    console.log(res);
                    let {  data } = res.data;
                    //只能通过mutations来改变状态
                    commit('setRoles', data.roles)
                    resolve(data);
                }).catch(err => { 
                    reject(err);
                })
            })
        },
        // 退出 需要清除角色信息
        logout({  commit }) { 
            return new Promise((resolve, reject) => { 
                //发送请求获取角色信息(用户详情)
                logout().then(() => { 
                    //设置为空 ,清除
                    commit('setRoles', [])
                    resolve();
                }).catch(err => { 
                    reject(err);
                })
            })
        }
    
    
    };
    
    export default { 
        state,
        getters,
        mutations,
        actions
    }