devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

SSM(Spring+Springmvc+MyBatis)+ajax+JWT，实现登录JWT(token)认证获取权限_springmvc jwt

作者：IT小白 | 2024-03-02 20:38:34

赞

踩

springmvc jwt

 本人最近钻研SpringMVC，都是学习感悟与个人看法，接受任何提问与建议，希望大家提出自己独特的见解，谢谢。

也可以进入我的b站主页，观看在线教程，视频中写出了当前文章中未出现的技术，而且在拦截器上也做出了许多改动，使用了两个拦截器来进行认证与权限；

微风梦之雫的个人空间_哔哩哔哩_bilibili

1-总体

2-首先是我们的pom.xml

  1. <build>
  2.         <plugins>
  3.             <plugin>
  4.                 <groupId>org.apache.maven.plugins</groupId>
  5.                 <artifactId>maven-compiler-plugin</artifactId>
  6.                 <configuration>
  7.                     <source>8</source>
  8.                     <target>8</target>
  9.                 </configuration>
  10.             </plugin>
  11.         </plugins>
  12.     </build>
  13.     <packaging>war</packaging>
  14. <dependencies>
  15.  
  16.         <dependency>
  17.             <groupId>org.springframework</groupId>
  18.             <artifactId>spring-web</artifactId>
  19.             <version>5.3.5</version>
  20.         </dependency>
  21.  
  22.         <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
  23.         <dependency>
  24.             <groupId>org.springframework</groupId>
  25.             <artifactId>spring-webmvc</artifactId>
  26.             <version>5.3.5</version>
  27.         </dependency>
  28.  
  29.         <!-- https://mvnrepository.com/artifact/org.springframework/spring-context -->
  30.         <dependency>
  31.             <groupId>org.springframework</groupId>
  32.             <artifactId>spring-context</artifactId>
  33.             <version>5.3.5</version>
  34.         </dependency>
  35.  
  36.         <!-- https://mvnrepository.com/artifact/org.springframework/spring-core -->
  37.         <dependency>
  38.             <groupId>org.springframework</groupId>
  39.             <artifactId>spring-core</artifactId>
  40.             <version>5.3.5</version>
  41.         </dependency>
  42.         <!-- https://mvnrepository.com/artifact/org.springframework/spring-beans -->
  43.         <dependency>
  44.             <groupId>org.springframework</groupId>
  45.             <artifactId>spring-beans</artifactId>
  46.             <version>5.3.5</version>
  47.         </dependency>
  48.  
  49.  
  50.         <dependency>
  51.             <groupId>org.glassfish.web</groupId>
  52.             <artifactId>jstl-impl</artifactId>
  53.             <version>1.2</version>
  54.             <!-- 去除依赖 -->
  55.             <exclusions>
  56.                 <exclusion>
  57.                     <groupId>javax.servlet</groupId>
  58.                     <artifactId>servlet-api</artifactId>
  59.                 </exclusion>
  60.             </exclusions>
  61.         </dependency>
  62.  
  63.         <dependency>
  64.             <groupId>javax.servlet</groupId>
  65.             <artifactId>javax.servlet-api</artifactId>
  66.             <version>3.1.0</version>
  67.             <scope>provided</scope>
  68.         </dependency>
  69.         <dependency>
  70.             <groupId>com.alibaba</groupId>
  71.             <artifactId>fastjson</artifactId>
  72.             <version>1.2.76</version>
  73.         </dependency>
  74.         <dependency>
  75.             <groupId>c3p0</groupId>
  76.             <artifactId>c3p0</artifactId>
  77.             <version>0.9.1.2</version>
  78.         </dependency>
  79.         <dependency>
  80.             <groupId>mysql</groupId>
  81.             <artifactId>mysql-connector-java</artifactId>
  82.             <version>8.0.20</version>
  83.         </dependency>
  84.         <dependency>
  85.             <groupId>org.springframework</groupId>
  86.             <artifactId>spring-jdbc</artifactId>
  87.             <version>5.3.5</version>
  88.         </dependency>
  89.         <!-- https://mvnrepository.com/artifact/org.springframework/spring-websocket -->
  90.         <dependency>
  91.             <groupId>org.springframework</groupId>
  92.             <artifactId>spring-websocket</artifactId>
  93.             <version>5.3.5</version>
  94.         </dependency>
  95.  
  96.  
  97.         <dependency>
  98.             <groupId>org.mybatis</groupId>
  99.             <artifactId>mybatis-spring</artifactId>
  100.             <version>1.3.0</version>
  101.         </dependency>
  102.  
  103.         <dependency>
  104.             <groupId>org.mybatis</groupId>
  105.             <artifactId>mybatis</artifactId>
  106.             <version>3.4.1</version>
  107.         </dependency>
  108.  
  109.         <dependency>
  110.             <groupId>org.slf4j</groupId>
  111.             <artifactId>slf4j-api</artifactId>
  112.             <version>1.7.25</version>
  113.         </dependency>
  114.  
  115.         <dependency>
  116.             <groupId>io.jsonwebtoken</groupId>
  117.             <artifactId>jjwt</artifactId>
  118.             <version>0.9.0</version>
  119.         </dependency>
  120.         <!--redis -->
  121.  
  122.         <!--spring-data-redis版本不能太高害怕有冲突 -->
  123.  
  124.         <dependency>
  125.  
  126.             <groupId>org.springframework.data</groupId>
  127.  
  128.             <artifactId>spring-data-redis</artifactId>
  129.  
  130.             <version>1.7.5.RELEASE</version>
  131.  
  132.         </dependency>
  133.  
  134.         <dependency>
  135.  
  136.             <groupId>redis.clients</groupId>
  137.  
  138.             <artifactId>jedis</artifactId>
  139.  
  140.             <version>2.9.0</version>
  141.  
  142.         </dependency>
  143.         <dependency>
  144.             <groupId>com.fasterxml.jackson.core</groupId>
  145.             <artifactId>jackson-databind</artifactId>
  146.             <version>2.11.4</version>
  147.         </dependency>
  148.         <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
  149.         <dependency>
  150.             <groupId>commons-codec</groupId>
  151.         <artifactId>commons-codec</artifactId>
  152.         <version>1.10</version>
  153.         </dependency>
  154.  
  155.     </dependencies>

3-Configuration配置类

1.ServletConfig， 我们的一些拦截器，或者处理器，视图解析器，都可以在此配置类进行配置，它是实现了WebMvcConfigurer的方法；

  1. @Configuration
  2. @EnableWebMvc
  3. @ComponentScan(basePackages = "com.cjj.controller")
  4. public class ServletConfig implements WebMvcConfigurer {
  5.  
  6.     @Bean
  7.     public ViewResolver viewResolver(){
  8.         InternalResourceViewResolver viewResolver=new InternalResourceViewResolver();
  9.         viewResolver.setPrefix("/WEB-INF/views/");
  10.         viewResolver.setSuffix(".html");
  11.         viewResolver.setExposeContextBeansAsAttributes(true);
  12.         return viewResolver;
  13.         //InternalResourceViewResolver 是 Spring MVC 中最常用的视图解析器
  14.         // 它用于解析 JS P或 HTML 等资源文件。该解析器会将逻辑视图名称加上前缀和后缀
  15.         // 例如将逻辑视图名称 “hello” 解析为 “/WEB-INF/views/hello.html”。
  16.     }
  17.     public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
  18.         configurer.enable();
  19.     }
  20.     @Bean
  21.     public MyInterceptor getMyInterceptor(){
  22.         return new MyInterceptor();
  23.     }
  24.     public void addInterceptors(InterceptorRegistry registry) {
  25.         registry.addInterceptor(getMyInterceptor())
  26.                 .addPathPatterns("/**")
  27.                 .excludePathPatterns("/login2")
  28.                 .excludePathPatterns("/")
  29.                 .excludePathPatterns("/testredis")
  30.                 .excludePathPatterns("/image/**")
  31.                 .excludePathPatterns("/js/**")
  32.                 .excludePathPatterns("/css/**");
  33.     }
  34. }

2.RootConfig,用于配置我的数据库，完全实现用注解，xml文件不需要使用；

  1. @Configuration
  2. // Reposity  @service  @Bean
  3. @MapperScan(basePackages="com.cjj.Dao")
  4.  
  5. @ComponentScan(basePackages = "com.cjj" ,excludeFilters =
  6.         {@ComponentScan.Filter(type = FilterType.ANNOTATION,value ={EnableWebMvc.class, Controller.class})})
  7. //是除了web层的所有的Bean
  8. @PropertySource({"classpath:jdbc.properties"})
  9. public class RootConfig {
  10.  
  11.     @Value("${driverClass}")
  12.     private  String driver;
  13.     @Value("${url}")
  14.     private String url;
  15.  
  16.     @Value("${root}")
  17.     private String root;
  18.  
  19.     @Value("${password}")
  20.     private String password;
  21.  
  22.     @Bean(name="datasource")
  23.     public DataSource getDataSource(){
  24.  
  25.         ComboPooledDataSource dataSource=new ComboPooledDataSource();
  26.         try {
  27.             dataSource.setDriverClass(driver);
  28.             dataSource.setJdbcUrl(url);
  29.             dataSource.setUser(root);
  30.             dataSource.setPassword(password);
  31.         } catch (PropertyVetoException e) {
  32.             e.printStackTrace();
  33.         }
  34.         return dataSource;
  35.     }
  36.  
  37.  
  38.     @Bean(name = "jdbctemplate")
  39.     public JdbcTemplate getJdbcTemplate(DataSource dataSource){
  40.         JdbcTemplate jdbcTemplate=new JdbcTemplate(dataSource);
  41.         return jdbcTemplate;
  42.     }
  43.  
  44.     //mybatis的配置
  45.     @Bean
  46.     public SqlSessionFactoryBean sqlSessionFactoryBean() throws IOException {
  47.         System.out.println("SqlSessionFactoryBean---------------------------");
  48.         ResourcePatternResolver resourcePatternResolver = new PathMatchingResourcePatternResolver();
  49.         SqlSessionFactoryBean sqlSessionFactoryBean = new SqlSessionFactoryBean();//mybatis-plus插件类
  50.         sqlSessionFactoryBean.setDataSource(getDataSource());//数据源
  51.         sqlSessionFactoryBean.setMapperLocations(resourcePatternResolver.getResources("classpath:mappers/*.xml"));
  52.         return sqlSessionFactoryBean;
  53.     }
  54. }

让我们可以不需要配置xml文件，就能访问到mappers下的所有映射文件,jdbc.properties我就不献上了，大家根据自己的数据库配置来；

3. MvcApplication,实现我们的AbstractAnnotationConfigDispatcherServletInitializer，就不用多说了，用于配置我们的容器，很关键的一个容器类；

  1. public class MvcApplication extends AbstractAnnotationConfigDispatcherServletInitializer {
  2.     @Override
  3.     protected Class<?>[] getRootConfigClasses() {
  4.         //返回的带有@Configuration注解的类用来配置ContextLoaderListener；
  5.         System.out.println("RootConfig-----------");
  6.         return new Class[]{RootConfig.class};
  7.     }
  8.  
  9.     @Override
  10.     protected Class<?>[] getServletConfigClasses() {
  11.         //将一个或多个路径映射到DispatcherServlet上；
  12.         System.out.println("ServletConfig-----------");
  13.         return new Class[]{ServletConfig.class};
  14.     }
  15.  
  16.     @Override
  17.     protected String[] getServletMappings() {
  18.         // /*拦截所有http请求，包括.jsp,都作为控制器类的请求路径处理；
  19.         System.out.println("getServletMappings-----------");
  20.         return new String[]{"/"};
  21.     }
  22.  
  23. }

4- 创建Model实体类

配置全都部署好了，接下来开始我们的实体类

User

  1. @Component
  2. public class User {
  3.     private int id;
  4.     private String username;
  5.     private String password;
  6.     private String token;
  7.     private int rid;
  8.     private List<privilege> pprivilegerList;
  9.  
  10.     public User() {
  11.     }
  12.  
  13.     public User(String username, String password, String token) {
  14.         this.username = username;
  15.         this.password = password;
  16.         this.token = token;
  17.     }
  18.  
  19.     public User(int id, String username, String password, String token, int rid) {
  20.         this.id = id;
  21.         this.username = username;
  22.         this.password = password;
  23.         this.token = token;
  24.         this.rid = rid;
  25.     }
  26.     public int getId() {
  27.         return id;
  28.     }
  29.  
  30.     public void setId(int id) {
  31.         this.id = id;
  32.     }
  33.  
  34.     public String getUsername() {
  35.         return username;
  36.     }
  37.  
  38.     public void setUsername(String username) {
  39.         this.username = username;
  40.     }
  41.  
  42.     public String getPassword() {
  43.         return password;
  44.     }
  45.  
  46.     public void setPassword(String password) {
  47.         this.password = password;
  48.     }
  49.  
  50.     public String getToken() {
  51.         return token;
  52.     }
  53.  
  54.     public void setToken(String token) {
  55.         this.token = token;
  56.     }
  57.  
  58.  
  59.  
  60.     public int getRid() {
  61.         return rid;
  62.     }
  63.  
  64.     public void setRid(int rid) {
  65.         this.rid = rid;
  66.     }
  67.  
  68.     public List<privilege> getPprivilegerList() {
  69.         return pprivilegerList;
  70.     }
  71.  
  72.     public void setPprivilegerList(List<privilege> pprivilegerList) {
  73.         this.pprivilegerList = pprivilegerList;
  74.     }
  75.  
  76.     @Override
  77.     public String toString() {
  78.         return "User{" +
  79.                 "id=" + id +
  80.                 ", username='" + username + '\'' +
  81.                 ", password='" + password + '\'' +
  82.                 ", token='" + token + '\'' +
  83.                 ", rid=" + rid +
  84.                 '}';
  85.     }
  86. }

 Privilege，我的权限是用来测试的，我也不清楚，我的用法对不对,希望大家指点；

  1. @Component
  2. public class privilege {
  3.     private int id;
  4.     private String demoname;
  5.     private int pid;
  6.  
  7.     public privilege() {
  8.     }
  9.  
  10.     public privilege(int id, String demoname, int pid) {
  11.         this.id = id;
  12.         this.demoname = demoname;
  13.         this.pid = pid;
  14.     }
  15.  
  16.     public int getId() {
  17.         return id;
  18.     }
  19.  
  20.     public void setId(int id) {
  21.         this.id = id;
  22.     }
  23.  
  24.     public String getDemoname() {
  25.         return demoname;
  26.     }
  27.  
  28.     public void setDemoname(String demoname) {
  29.         this.demoname = demoname;
  30.     }
  31.  
  32.     public int getPid() {
  33.         return pid;
  34.     }
  35.  
  36.     public void setPid(int pid) {
  37.         this.pid = pid;
  38.     }
  39. }

5- 接口，实现映射

  1. @Repository
  2. @Mapper
  3. public interface UserDao {
  4.     public User login(User user);
  5.  
  6.     public List<privilege> getprivilege(User user);
  7. }
  1. <mapper namespace="com.cjj.Dao.UserDao">
  2.     <select id="login" parameterType="com.cjj.Model.User" resultType="com.cjj.Model.User">
  3.         select id,username,password,token,rid FROM `user` where `user`.username=#{username} and `user`.`password`=#{password}
  4.     </select>
  5.     <resultMap id="wei" type="com.cjj.Model.privilege" >
  6.             <id column="id" property="id"/>
  7.             <result column="demoname" property="demoname"/>
  8.             <result column="rid" property="rid"/>
  9.     </resultMap>
  10.     <select id="getprivilege" parameterType="com.cjj.Model.User" resultMap="wei">
  11.         SELECT a.id ,b.demoname ,b.pid  FROM user
  12.         INNER JOIN role ON role.id = user.rid
  13.         INNER JOIN privilege a ON a.id = role.id
  14.         INNER JOIN privilege b on a.id = b.pid
  15.         WHERE user.rid= #{rid}
  16.     </select>
  17. </mapper>

6-创建业务方法，service

  1. public interface UserServiceIdao {
  2.     public User login(User user);
  3.  
  4.     public List<privilege> getprivilege(User user);
  5. }

 实现接口

  1. @Service
  2. public class UserService implements UserServiceIdao {
  3.     @Autowired
  4.     private UserDao userDao;
  5.  
  6.     @Override
  7.     public User login(User user) {
  8.         return userDao.login(user);
  9.     }
  10.  
  11.     @Override
  12.     public List<privilege> getprivilege(User user) {
  13.         return userDao.getprivilege(user);
  14.     }
  15. }

7-JwtBuilder

在咱们进入控制层之前，咱们先来配置好jwt类的生成与解析

  1. public class JWTuuid {
  2.     private static final long time =60*60*24*1000;
  3.     private static final String signature="weifeng00000x";//秘钥
  4.  
  5.     public  static final String createjwt(String name, User user)
  6.     {
  7.         JwtBuilder jwtBuilder= Jwts.builder();
  8.         String jwttoken=jwtBuilder
  9.                 //header -- 设置头
  10.                 .setHeaderParam("typ","JWT")
  11.                 .setHeaderParam("alg","HS256")//加密算法
  12.  
  13.                 //payload----载荷
  14.                 .claim("username",name)
  15.                 .claim("stu", user)
  16.                 //主题
  17.                 .setSubject("weifeng-test")
  18.                 //有效时间
  19.                 .setExpiration(new Date(System.currentTimeMillis()+time))//从当前开始，24小时
  20.                 //jwt id
  21.                 .setId(UUID.randomUUID().toString())
  22.                 //签名 signature
  23.                 .signWith(SignatureAlgorithm.HS256,signature)
  24.                 .compact();
  25.             return jwttoken;
  26.     }
  27.     // 解析 JWT
  28.     public static Claims testJWT(String jwt) {
  29.         try{
  30.             Claims claims = Jwts.parser()
  31.                     .setSigningKey(signature) //放入秘钥
  32.                     .parseClaimsJws(jwt) //放入需要解析的串
  33.                     .getBody();
  34.             return claims;
  35.         }catch (Exception e){
  36.             e.printStackTrace();
  37. //             如果对于秘钥解析错误那么放回null
  38.             return null;
  39.         }
  40.     }
  41.  
  42.     public static boolean validateToken(String token) {
  43.         try {
  44.             Jwts.parser().setSigningKey(signature).parseClaimsJws(token);
  45.             return true;
  46.         } catch (Exception e) {
  47.             return false;
  48.         }
  49.     }
  50.  
  51. }

8-Controller控制层

终于来到了咱们的控制层

  1. @RestController
  2. public class UserController {
  3.  
  4.     @Autowired
  5.     UserService userService;
  6.  
  7.     @CrossOrigin(origins = "http://localhost:63342")
  8.     @PostMapping("/login2")
  9.     @ResponseBody
  10.     public Object login2(@RequestBody JSONObject json, HttpServletRequest req, HttpServletResponse response)
  11.     {
  12.             String username=json.getString("username");
  13.             String password=json.getString("password");
  14.             User user =new User(username,password,"");
  15.             System.out.println("username  "+username+"-----pwd  "+password);
  16.             User login = userService.login(user);
  17.             System.out.println("login的值为---------"+login);
  18.             if(login!=null)
  19.             {
  20.                 req.getSession().setAttribute("user",login);
  21.                 String createjwt = JWTuuid.createjwt(username, user);
  22.                 user.setToken(createjwt);
  23.                 System.out.println("jwt码--"+createjwt);
  24.  
  25.                 // 将token写入响应头中
  26.                 response.addHeader("Authorization", "Bearer " + createjwt);
  27.                 response.setContentType("application/json;charset=utf-8");
  28.                 return createjwt;
  29.             }
  30.             else {
  31.                 String error="用户名或密码错误";
  32.                 // 设置HTTP状态码为401 Unauthorized
  33.                 response.setStatus(HttpStatus.UNAUTHORIZED.value(),"用户名或密码错误");
  34.                 //response.setStatus(HttpStatus.UNAUTHORIZED.value());
  35.                 response.setContentType("application/json;charset=utf-8");
  36.                 // 返回
  37.                 return error;
  38.             }
  39.     }
  40.  
  41.     @RequestMapping(value = "/aa",method = RequestMethod.GET)
  42.     public ModelAndView getaa(HttpServletRequest req)
  43.     {
  44.         System.out.println("进来这个方法 getaa()");
  45.         ModelAndView mv=new ModelAndView();
  46.         mv.setViewName("aa");
  47.  
  48.         return mv;
  49.     }
  50.  
  51.     @GetMapping("/demo")
  52.     @ResponseBody
  53.     public Object getstu(@RequestParam("demo") int demo,HttpServletRequest req){
  54.         System.out.println("进来这个方法 getstu()");
  55.         System.out.println("demo : "+demo);
  56. //        System.out.println("token:  "+token);
  57. //        Claims claims=JWTuuid.testJWT(token);
  58. //        if(claims==null){
  59. //            System.out.println("jwt码有误，勿扰");
  60. //            return "jwt码有误，勿扰";
  61. //        }
  62.         List<privilege> user = userService.getprivilege((User) req.getSession().getAttribute("user"));
  63.         for (privilege s : user) {
  64.             System.out.println(s.getDemoname());
  65.         }
  66. //        String obj=claims.getSubject();
  67. //        System.out.println("提交主题:"+obj);
  68.         return user;
  69.     }
  70.  
  71.  
  72. }

其实我的登录是有些问题的，我返回的直接是个字符串，照理说应该是一个result集合，然后给状态或是其他什么的，将就看看吧，哈哈；

9-HandlerInterceptor拦截器

  1. public class MyInterceptor implements HandlerInterceptor {
  2.     @Override
  3.     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
  4.         System.out.println("===============请求处理前(1)===================");
  5.         String path=request.getRequestURL().toString();
  6.         if(path.indexOf("/login2")>=0){
  7.             System.out.println("确实是login方法------");
  8.             return true;
  9.         }
  10.         System.out.println("--------------------------------------"+path);
  11.         Object obj=request.getSession().getAttribute("user");
  12.         System.out.println(obj+"---------------------MyInterceptor");
  13.         if(obj!=null)
  14.             return true;
  15.  
  16.         // 获取Authorization请求头中的token
  17.         String authHeader = request.getHeader("Authorization");
  18.         if (authHeader != null && authHeader.startsWith("Bearer ")) {
  19.             String token = authHeader.substring(7);
  20.             System.out.println("截取的token");
  21.             // 验证token
  22.             if (JWTuuid.validateToken(token)) {
  23.                 return true;  // 验证通过，继续执行后续操作
  24.             }
  25.         }
  26.  
  27.         //request.setAttribute("msg","还没有登陆，请先登录");
  28.         request.getRequestDispatcher("index.html").forward(request,response);
  29.         return false;
  30.     }
  31.  
  32.     @Override
  33.     public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
  34. //        HandlerInterceptor.super.postHandle(request, response, handler, modelAndView);
  35.         System.out.println("===============请求处理后，生成视图之前(2)===================");
  36.         //assert modelAndView != null;
  37. //        System.out.println("modelviewname============="+modelAndView.getViewName());
  38.     }
  39.  
  40.  
  41.     @Override
  42.     public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
  43. //        HandlerInterceptor.super.afterCompletion(request, response, handler, ex);
  44.         System.out.println("===============结束时调用(3)===================");
  45.     }
  46. }

我觉得我的拦截器，写的有问题，虽然能成功使用，但还是希望大家提出各自独特的见解；

10-前端界面

index.html

  1.  
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>$Title$</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  7. </head>
  8. <body>
  9.     用户：<input id="username" type="text" name="username" placeholder="请输入用户">
  10.     密码：<input id="password" type="password" name="password" placeholder="请输入密码">
  11.     <button id="login" value="登录"/>
  12.     登录
  13.     <button type="reset" value="重置"/>
  14.     重置
  15.  
  16.  
  17. <script>
  18.     $("#login").click(function (){
  19.         let username = document.getElementById("username").value;
  20.         let password = document.getElementById("password").value;
  21.         let user={};
  22.         user.username=username;
  23.         user.password=password;
  24.         console.log(user);
  25.         $.ajax({
  26.             url: 'http://localhost:9090/login2',  // 请求的API接口地址
  27.             //http://iwenwiki.com:8088/api/FingerUnion/list.php
  28.             type: 'POST',
  29.             // headers:{
  30.             //     token:"wawa"
  31.             // },
  32.             dataType: 'text',
  33.             contentType:"application/json",
  34.             data:JSON.stringify(user) ,
  35.             success: function (e) {
  36.                 alert("key为："+e);
  37.                 console.log("key为："+e);
  38.                 localStorage.setItem('token', e);
  39.                 sessionStorage.setItem('token',e);
  40.                 window.location.href="http://localhost:9090/aa";
  41.                 // TODO: 处理接收到的数据
  42.             },
  43.             error: function (e) {
  44.                 alert("账号或密码错误！！");
  45.             }
  46.         });
  47.     });
  48.  
  49.     // let p=new Promise((resolve, reject) =>{
  50. </script>
  51. </body>
  52. </html>

aa.html    拿到当前用户的操作权限的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <p id="pp">你好你好你好你好喝牛奶</p>
  10. 操作功能：<button type="button" id="caoz" value="请操作"/>
  11.  
  12.  
  13. </body>
  14. </html>
  15. <script>
  16.     $("#caoz").click(function (){
  17.         $.ajax({
  18.             url: 'http://localhost:9090/demo',  // 请求的API接口地址
  19.             type:"get",
  20.             dataType: 'json',
  21.             contentType:"application/json",
  22.             data:{
  23.                 demo:20040309,
  24.             },
  25.             headers:{
  26.                 "Authorization":localStorage.getItem('token'),
  27.             },
  28.             success:function (e){
  29.                 alert("success回调执行了")
  30.                 for(var i = 0; i < e.length; i++) {
  31.                     var name = e[i].demoname;
  32.                     console.log("权限有", name);
  33.                 }
  34.             },
  35.             error:function (e){
  36.                 alert("error回调执行了")
  37.             },
  38.         });
  39.     })
  40. </script>

到此，我个人学习的收获就完了，希望能看到这里的朋友，学习永无瓶颈，天天开心，一直保持着一颗追求新技术的心。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/182331
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号