登录页权限管理

Dummerd

已于 2023-02-23 10:31:22 修改

阅读量244

点赞数

文章标签： javascript 前端 html

于 2023-02-23 09:37:02 首次发布

本文链接：https://blog.csdn.net/Dummerd/article/details/129169466

版权

该文介绍如何在Vue.js项目中使用js-cookie库来管理用户的登录状态。通过在路由守卫中检查cookie里的token来决定是否允许访问特定页面。登录成功后，token存储在cookie中，退出时则移除token并跳转回登录页面。

摘要由CSDN通过智能技术生成

token判断用户是否已经登录

获得的token一般存放在cookie里面

安装插件npm i js-cookie@3.0.1

在所需要用的页面引用 import Cookie from 'js-cookie'

在main.js中添加前置导航守卫

import Cookie from 'js-cookie'

//添加全局前置导航守卫
router.beforeEach((to, from, next) => {
    // 判断token存不存在
    const token = Cookie.get('token')
    // token不存在说明当前用户未登录，应该跳转至登录页
    if(!token && to.name !=='login'){  //如果token不存在他就会进入死循环，所以后面加条件 当前的页面不是登陆页面
        next({name:'login'})
    }else if(token && to.name =='login'){ //token存在，说明用户登录，此时跳转至首页 当前的页面是登陆页面
        next({name:'home'}) //跳转至首页
    }else{
        next()
    }

  })

点击登录按钮时验证账号密码有没有全部输入进去，然后放入接口进行判断，如果密码正确就把token存入cookie中，然后就跳转至首页，否则就是密码错误提示

    submit(){
    //token信息
    // const token = Mock.Random.guid()
    // // token信息存入cookie用于不同页面间的通信
    // Cookie.set('token',token)

    //校验通过
    this.$refs.form.validate((valid)=>{
        if (valid) {
            getMenu(this.form).then(({data})=>{  //如果校验通过传入表单数据给接口
                console.log(data);
                if(data.code === 20000){
                    //如果是20000证明请求成功
                    Cookie.set('token',data.data.token)
                        //获取菜单的数据，存入store中
                       // this.$store.commit('setMenu',data.data.menu)
                        //this.$store.commit('addMenu',this.$router)
                      //跳转至首页
                        this.$router.push('/home')
                }
                else{
                     //data.data.message数据是密码错误
                    this.$message.error(data.data.message);
                }
            })
        }
    })
   
    //跳转至首页
    // this.$router.push('/home')
    }

点击退出时移除token,使用remove，然后在跳转至登录页

退出下拉菜单（下拉菜单有自己的点击事件）

       <el-dropdown @command="handleClick">
        <span class="el-dropdown-link">
          <img src="../assets/images/img1.jpg" alt="" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item command="cancel">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

退出登录按钮

    handleClick(command){
      if(command==="cancel"){
        // console.log("退出");
        //清除cookie中的token
        Cookie.remove('token')
        //清除cookie中的menu
        Cookie.remove('menu')
        //跳转到登录页面
        this.$router.push("/login")
      }

    }