前后端权限管理分离code 302重定向到login登陆页403,记一大坑

前后端权限管理分离code 302重定向到login登陆页403,记一大坑

最近做一个sprngboot+springsecurity+mybatis+redis后台(method鉴权表达式),vue前端后台管理

我在postman测试的时候没问题,写到vue的时候就给我报code 302,
然后就在网上查code 302,看了很多搞了很长时间,依旧没解决,心态炸了!

最后解决办法:

我查看了postman的请求体:

在这里插入图片描述

又对比了vue前端的请求体:

在这里插入图片描述

朋友们发现问题所在了吗?
后台的是Authorization
前端是token

能一样吗?

那么怎么解决呢?

前端请求过滤

//添加请求拦截器
axios.interceptors.request.use(
  config =>{
    if(store.state.token){
      config.headers.common['token'] = store.state.token
    }
    return config;
  },
  error =>{
    //对请求错误做什么
    return Promise.reject(error);
  })

改为:

//添加请求拦截器
axios.interceptors.request.use(
  config =>{
    if(store.state.token){
       config.headers.common['Authorization'] ='Bearer ' + store.state.token
    }
    return config;
  },
  error =>{
    //对请求错误做什么
    return Promise.reject(error);
  })

在测试一遍:

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191224150141898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTc3MDAz,size_16,color_FFFFFF,t_70

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,我来为你讲解如何用 Python 写一个前后端分离的登录面。 首先,需要明确的是,在前后端分离的应用中,前端负责处理用户界面相关的事情,后端负责处理业务逻辑相关的事情。 具体来说,前端需要负责创建登录表单,并将用户的登录信息发送到后端。后端则需要负责接收前端发送的登录信息,并验证用户的身份。 下面是一个简单的例子,展示了如何用 Python 的 Flask 框架来创建一个前后端分离的登录面。 首先,安装 Flask 框架: ``` pip install flask ``` 然后,创建一个名为 `app.py` 的文件,并在其中编写以下代码: ```python from flask import Flask, request, jsonify app = Flask(__name__) # 定义一个路由,处理前端发送的登录请求 @app.route('/login', methods=['POST']) def login(): # 从请求中获取登录信息 username = request.form.get('username') password = request.form.get('password') # 验证用户的身份 if username == 'admin' and password == '123456': return jsonify({'status': 'success'}) else: return jsonify({'status': 'fail'}) if __name__ == '__main__': app.run() ``` 上面的代码中,我们定义了一个路由 `/login`,用于处理前端发送的登 ### 回答2: 要用Python编写一个前后端分离的登录面,需要通过前端面收集用户的登录信息,并将其发送到后端服务器进行验证。以下是一个简单的示例: 后端代码(使用Flask框架): ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/login', methods=['POST']) def login(): username = request.json.get('username') password = request.json.get('password') # 在这里进行用户名密码的验证逻辑 if username == 'admin' and password == 'password': return jsonify({'message': '登录成功'}) else: return jsonify({'message': '用户名或密码错误'}) if __name__ == '__main__': app.run() ``` 前端代码(使用HTML和JavaScript): ```html <!DOCTYPE html> <html> <head> <title>登录面</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <h1>登录面</h1> <form id="login-form"> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <button type="submit">登录</button> </form> <div id="message"></div> <script> $('#login-form').on('submit', function(e) { e.preventDefault(); // 阻止表单默认提交行为 var username = $('#username').val(); var password = $('#password').val(); $.ajax({ url: 'http://localhost:5000/login', method: 'POST', data: JSON.stringify({username: username, password: password}), contentType: 'application/json', success: function(res) { $('#message').text(res.message); } }); }); </script> </body> </html> ``` 运行以上代码后,打开浏览器访问前端面(http://localhost:5000),输入用户名和密码,点击登录按钮,前端面会发送登录信息到后端服务器进行验证,并将验证结果显示在面上。根据后端代码中的逻辑,如果用户名为`admin`且密码为`password`,则会显示`登录成功`,否则显示`用户名或密码错误`。根据实际需求,可以在后端代码中添加更复杂的验证逻辑。这只是一个简单的示例,实际的应用中可能需要更多的功能和安全性措施。 ### 回答3: 要实现一个前后端分离的登录面,需要使用Python编写后端接口,并使用前端技术实现面的交互和展示。 首先,我们可以使用Python的Flask框架来搭建后端接口。在后端代码中,我们需要定义一个/login的路由,用于接收前端发送的登录请求。在该路由中,我们可以验证用户输入的账号和密码是否正确,并根据验证结果返回相应的响应信息。可以使用数据库存储用户信息,如MySQL或MongoDB,或者使用其它持久化方式。 在前端代码中,我们可以使用HTML、CSS和JavaScript等技术来实现面的布局和交互。首先,我们可以创建一个登录表单,包括输入账号和密码的输入框,以及提交按钮。在用户点击提交按钮后,使用JavaScript可以获取用户输入的账号和密码,并将其发送给后端接口。根据后端接口的响应结果,前端可以根据成功或失败的不同进行相应的操作,如跳转到主或显示登录失败的提示信息。 为了实现前后端之间的数据传输,我们可以使用AJAX技术。在前端代码中,可以使用XMLHttpRequest或fetch等工具库来发送异步请求,并获取后端接口的响应结果。在成功获取响应结果后,前端可以解析后端返回的数据,并根据需要进行相应的操作。 总结来说,实现前后端分离的登录面,需要使用Python编写后端接口,并使用HTML、CSS和JavaScript等前端技术来实现面的布局、交互和数据传输。前后端通过异步请求和响应来实现数据的交互,并进行相应的处理和展示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值