Vue 单点登录

1.每次请求登录的时候携带token

axios.interceptors.request.use(
  function(config) {
    //   获取令牌
      const token = sessionStorage.getItem('token')
      if (token!=null) { 
        config.headers.Authorization = 'bearer ' + token
    }
    return config;
  },
    function(error) {
        return Promise.reject(error)
    }
)

2.下载并导入import Base64 from 'js-base64’
3.点击登录提交时
// 登录提交表单信息

 submit_btn(formRef) {
      this.$refs[formRef].validate(async (valid) => { 
        //   表单校验
        if (!valid) return this.$message.error('请填写完整信息!')
        const {
          data: res
        } = await this.$http.post('/authentication/form', {}, {
        headers: {
            "Authorization": "Basic " + Base64.encode('tin-portal:zlf78641d063850b469f1k201feff3c4'),
            "Content-Type": "application/x-www-form-urlencoded"
          },
          params: {
            username: this.loginForm.username,
            password: this.loginForm.password,
            imageCode: this.loginForm.picPass,
            deviceId: this.text
          }
        })
        // console.log(data)
      console.log(res)
        // 登录成功
        if (res.status == 200) {
          this.$message.success('登录成功!')
          // 清空表单
          this.loginForm.username = '',
          this.loginForm.password = '',
          this.loginForm.picPass = ''
          // 把 登录成功后,服务器颁发的令牌,存储到 sessionStorage 中
          sessionStorage.setItem('token', res.data.access_token)
          sessionStorage.setItem('refresh_token', res.data.refresh_token)
          // 通过 编程式导航 API,跳转到 后台 首页的 路由地址  /home
          if(this.$route.query.userId){
            this.$router.push(this.$route.query.userId)
          }else{
            this.$router.push('/')
          }         
        }else if(res.status == 20011) {
          this.$message.error('图片验证码输入错误')
          this.loginForm.picPass = ''
          this.getPicAuthCode()
        }else if(res.status == 20007) {         
          this.$message.error('密码输入错误')
          this.loginForm.password = ''
          this.loginForm.picPass = ''
          this.getPicAuthCode()
        }
       
      })
    
    },
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值