项目实战day6

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

---

---

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
}