Vue + axios + elementUI实现简单的登录+权限控制（不使用VueX）

wmklalala

于 2020-08-18 00:31:55 发布

阅读量843

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/wmklalala/article/details/108067160

版权

实现目标

游客可以浏览网站，登录后的用户可以对网页内容进行编辑与管理。

游客看见的菜单栏：

登录后的菜单栏：

具体思路

1.管理页面需要登录才能进入，在router.js中添加meta

2.前端发送用户名和密码给后端，登录成功后后端返回一个token，保存在localStorage中，并设置isLogin为true。登录成功后跳转到主页。

//Login.vue

login(){
            this.$refs.loginForm.validate((valid) => {
                if(valid){
                    let user = this.loginForm.userName;
                    let pwd = this.loginForm.password;
                    this.$axios.get(`/User/Login?UserName=${user}&Pas