vue3.0 实现登陆状态的保持与限制

使用的插件 vuex，axios和vue router

项目中部分网页不需要登陆就能访问比如登陆，注册，其他页面的访问则需保持登陆状态，下面这种

1.首先配置路由：在router.js中添加meta区分

比如登录注册页面，不需要登录即可进入，那么我们把meta中的isLogin标志设置为false

{
    //登录
    path: '/loginweb',
    component: Login,
    meta: {
        isLogin: false
    }
},
{
    //注册
    path: '/logon',
    component: Logon,
    meta: {
        isLogin: false
    }
},

而在首页我们需要登录才能进入，那么我们把meta中的isLogin标志设置为true

{
    //首页
    path: '/',
    component: Home,
    meta: {
        isLogin: true
    }
},
{
    //中国文化
    path: '/chinese',
    component: Chinese,
    meta: {
        isLogin: true
    }
},
{
    //中国文化
    path: '/news',
    component: News,
    meta: {
        isLogin: true
    }
},
{
    //趣味汉语
    path: '/ic',
    component: IC,
    meta: {
        isLogin: true
    }
},
{
    //成语
    path: '/idiom',
    component: Idiom,
    meta: {
        isLogin: true
    }
},
{
    //交流互动
    path: '/ei',
    component: EI,
    meta: {
        isLogin: true
    }
},
{
    //诗词
    path: '/poetry',
    component: Poetry,
    meta: {
        isLogin: true
    }
},
{
    //练习
    path: '/practice',
    component: Practice,
    meta: {
        isLogin: true
    }
},
{
    //对话
    path: '/dialogue',
    component: Dialogue,
    meta: {
        isLogin: true
    }
}

这样我们就为进入各个路由是否需要登录做了区分。

2.在登陆请求成功后修改状态

var that = this;
this.$axios.post('/login/', this.$qs.stringify({
    username: this.logindata.username,
    pwd: this.logindata.pass,
}))
.then(function (res) {
    console.log(res);
    if (res.data.msg == '该用户不存在') {
        that.logindata.erusername = res.data.msg;
    } else if (res.data.msg == '输入密码错误') {
        that.logindata.erpass = res.data.msg;
    } else {
        //登陆成功后设置了，localStorage 保存登陆状态和userid
        localStorage.setItem("Userid", res.data.userid);
        localStorage.setItem("Flag", "isLogin");
        that.$store.dispatch("userLogin", true);
        that.$router.push("/");
    }
})
.catch(function (error) {
    if (error) {
        console.log('登录请求失败');
    }
});

这个里为什么要使用that重新代替this 是因为箭头函数中this指向了上下文，不在本组件中，取不到组件中的相关的值

3.在vuex中，stor.js这样写

export default new Vuex.Store({
    // 设置属性
    state: {
        isLogin: false,
    },

    // 获取属性的状态
    getters: {
        //获取登录状态
        isLogin: state => state.isLogin,
    },

    // 设置属性状态
    mutations: {
        //保存登录状态
        userStatus(state, flag) {
            state.isLogin = flag
        },
    },

    // 应用mutations
    actions: {
        //获取登录状态
        setUser({commit}, flag) {
            commit("userStatus", flag)
        },
    }
})

重点来了~，在mian.js里，需要控制路由的跳转

router.beforeEach((to, from, next) => {

    //获取用户登录成功后储存的登录标志
    let getFlag = localStorage.getItem("Flag");
    let getid = localStorage.getItem("Userid");
    //如果登录标志存在且为isLogin，即用户已登录
    if (getFlag === "isLogin"&&getid !== null) {

        //设置vuex登录状态为已登录
        store.state.isLogin = true;
        next();

        //如果已登录，还想想进入登录注册界面，则定向回首页
        if (!to.meta.isLogin) {
            //iViewUi友好提示
            // iView.Message.error('请先退出登录');
            next({
                path: '/'
            })
        }

        //如果登录标志不存在，即未登录
    } else {

        //用户想进入需要登录的页面，则定向回登录界面
        if (to.meta.isLogin) {
            next({
                path: '/loginweb',
            })
            //用户进入无需登录的界面，则跳转继续
        } else {
            next()
        }

    }

});

router.afterEach(() => {
    window.scroll(0, 0);
});

这样就已经完成了Vue的登录注册，当用户关闭浏览器或者第二天再次进入网站，用户依旧可以保持着登录的状态直到用户手动退出登录。

用户退出只需要localStorage.removeItem("Flag")，localStorage.removeItem("Userid")即可

错误路由的拦截，只要我们没有登陆，或者错误的路由，都会跳转登陆页面 

created: function () {
    if (!this.$route.matched.length) {
        this.$router.push("/");
    }
    let getFlag = localStorage.getItem("Flag");
    let getid = localStorage.getItem("Userid");
    if ((getid===null||getFlag !== "isLogin") && this.$route.path != '/logon') {
        this.$router.push("/loginweb");
    }
},