权限系统：
1、前端：vue + elementui + axios + css + html
2、后端：springboot + mybatis-plus + nybatis + druid + shiro + swagger2 + redis
1.1.1 Login.vue文件
1.1.2 App.vue
1.1.3 router/index.js
如果想在vue工程中使用axios进行异步请求，则需要在main.js中导入axios [1]//导入axios import axios from “axios”; [2]//把axios挂载到vue对象中,以后在vue中如果使用axios直接可以用\(http名称 Vue.prototype.\)http=axios
1.2.1 main.js文件
1.2.2 Login.vue文件
在Login.vue文件中点击登录按钮，向后台服务器发送axios异步请求
测试
我们会发现报了不支持跨域请求的错误
当使用异步请求从一个网址访问另一个网址时可能会出现跨域问题。 前提: 1. 必须为异步请求 2. 当端口号或协议或ip不同时则会出现跨域
什么是跨域呢？
前端发起请求的域与该请求指向的资源所在的域不一样，凡是发送请求的url的 协议、域名、端口号三者之间任意一者与当前页面地址不同的请求。这里的域指的是这样的一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域。
出现了两个请求: 有一个请求的方式为: OPTIONS 和真实的请求方式
OPTIONS先头部队。—探视后台有没有解决跨域。
解决方法：
1.前端解决
2.后端解决—->这里也有几种方式：
【1】可以借助nginx.
【2】在代码中解决
在控制层接口上添加@CrossOrigin ，不过每一个controller文件都许哟啊加上这个注解
这个注解的一些属性
(origins = {“192.168.0.111:8080”,“192.168.0.120:8081”},allowedHeaders=“运行哪些请求头跨域”,methods={“GET”,“POST”})
origins: 允许哪些域可以跨域访问我这个接口 allowedHeaders:允许哪些请求头信息跨域 methods: 允许哪些请求方式跨域
设置一个全局跨域配置类。
这个配置类和上面的@CrossOrigin注解两者只能选其一。
上面咱们写的登录，后端没有保存数据 前端也没有拿到数据进行保存
后面每次请求都可以携带该token，每次请求都得要人为添加参数token， 我们可以使用axios得请求拦截器。
在登录成功之后，使用一个按钮测试token是否在请求头中
然后观察后台能否获取token
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/188756.html