项目文档(request页面代码逻辑)

项目文档

目录

项目文档

1.  封装请求基地址

代码

2. 添加请求拦截器并设置请求头

作用

代码部分

3. 添加响应拦截器

作用

代码

4. token过期问题处理

5. 无感刷新

作用

代码

6. refresh_token过期处理

解决方式


1.  封装请求基地址

  • 在src目录下 放上一个专门写请求相关的文件夹
  • 然后在里面新建一个专门放用户请求的use.js
  • 用axios发送请求
  • 在use.js文件夹里导入request
  • 并且根据接口文档 写请求
  • 然后把这个请求封装成一个函数,这个函数里需要传入两个参数
  • 这两个参数 都放在data数据里 所以可以直接申明需要的数据是data

代码

2. 添加请求拦截器并设置请求头

作用

在向服务器发送请求时,很多请求都需要在请求头中携带token,每一次去请求都写请求头很麻烦,所以我们写一个请求拦截器,统一拦截并添加一个请求头

代码部分

// 请求拦截器
request.interceptors.request.use((config) => {
    // Do something before request is sent
    // 在我们发送请求前做的事情

    // 判断发送的请求需不需要请求头
    if (store.state.tokenObj.token) {
        // 统一在请求头中携带token
        config.headers.Authorization = 'Bearer ' + store.state.tokenObj.token
    }
    return config
}, (error) => {
    // Do something with request error
    // 请求失败
    return Promise.reject(error)
})


3. 添加响应拦截器

作用

响应拦截器里参数就是服务器返回给浏览器的内容  拦截器返回什么 浏览器拿到什么 如果拦截器什么都返回 那么浏览器什么都拿不到

代码

//响应拦截器
request.interceptors.response.use(function (response) {
    // 处理响应数据
    return response; // 返回响应数据
},
  


4. token过期问题处理

【模拟token过期】

在应用里的本地存储里 去更改token 达到让token失效

【拦截器拦截失败信息】

因为token过期, 所以第二次请求失败 ,那要代码继续运行下去, 就放上一个响应拦截器 把这个错误拦截, 并且不return出去 这样浏览器就不知道有这个错误。

 async function (error) {
        console.log('出错了');
        // 响应出错后所做的处理工作
        // return Promise.reject(error);
        try{
        //发送请求,获取refresh_token
        let res = await axios({
            url: 'http://geek.itheima.net/v1_0/authorizations',
            method: 'put',
            //请求头
            headers: {
                Authorization: 'Bearer ' + store.state.tokenObj.refres_token
            }
        })
        //调用store里的changeToken方法,修改初始token
        store.commit('changeToken', {
            // 使用第三次请求中打的到的新的token替换原本的token
            token: res.data.data.token,
            // refres_token依然是原本的值
            refres_token: store.state.tokenObj.refres_token
        })
        // 这个时候把获取用户信息这个请求再发了一次
        // 在请求拦截器中,拦截器return什么,浏览器就拿到什么
        return request(error.config)
        // console.log('第三次请求获取到的内容', res);
    }catch{
        Toast.fail('登录状态失败,重新登陆')
        // 返回登录页
        router.push('./login')
    }
    });


5. 无感刷新

作用

用户不用刷新页面 系统内容自己重新发送请求 渲染页面

代码

        // 这个时候把获取用户信息这个请求再发了一次
        // 在请求拦截器中,拦截器return什么,浏览器就拿到什么
        return request(error.config)

加上这段代码, 在两个小时后 ,浏览器会自己把之前失败的请求 ,换成新的token再发一遍 用户不需要刷新页面 就可以在两个小时后 有新的token 并且页面不会出现任何破绽。


6. refresh_token过期处理

14天后refresh_token也会过期

解决方式

使用 try{}catch{}处理失败的情况

把整段请求代码放进try代码里进行检验

       try{
        //发送请求,获取refresh_token
        let res = await axios({
            url: 'http://geek.itheima.net/v1_0/authorizations',
            method: 'put',
            //请求头
            headers: {
                Authorization: 'Bearer ' + store.state.tokenObj.refres_token
            }
        })
        //调用store里的changeToken方法,修改初始token
        store.commit('changeToken', {
            // 使用第三次请求中打的到的新的token替换原本的token
            token: res.data.data.token,
            // refres_token依然是原本的值
            refres_token: store.state.tokenObj.refres_token
        })
        // 这个时候把获取用户信息这个请求再发了一次
        // 在请求拦截器中,拦截器return什么,浏览器就拿到什么
        return request(error.config)
        // console.log('第三次请求获取到的内容', res);
    }catch{
        Toast.fail('登录状态失败,重新登陆')
        // 返回登录页
        router.push('./login')
    }

 编辑页面

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是在Spring Boot项目中使用Spring Security的示例代码: 1. 添加依赖项: 在Maven构建文件中添加以下依赖项: ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> ``` 2. 创建Security配置类: 创建一个类来配置Spring Security,该类需要继承WebSecurityConfigurerAdapter类。以下是一个简单的示例: ``` @Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Autowired private UserDetailsService userDetailsService; @Autowired public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception { auth.userDetailsService(userDetailsService); } @Override protected void configure(HttpSecurity http) throws Exception { http .authorizeRequests() .antMatchers("/admin/**").hasRole("ADMIN") .antMatchers("/user/**").hasAnyRole("ADMIN", "USER") .anyRequest().authenticated() .and() .formLogin() .loginPage("/login") .permitAll() .and() .logout() .permitAll(); } } ``` 在上面的配置中,我们指定了哪些URL需要保护,并定义了用户身份验证方式。具体来说: - configureGlobal方法用于配置用户存储,我们使用了一个实现了UserDetailsService接口的类来加载用户信息。 - configure方法用于配置访问控制和身份验证方式。我们使用了一个基于角色的访问控制策略,指定了哪些URL需要哪些角色。我们还配置了登录页面和注销功能。 3. 配置用户存储: 我们可以使用内存,数据库或LDAP等不同类型的存储来存储用户及其角色信息。以下是一个使用内存存储的示例: ``` @Service public class UserDetailsServiceImpl implements UserDetailsService { private Map<String, UserDetails> users = new HashMap<>(); public UserDetailsServiceImpl() { User admin = new User("admin", "{noop}admin123", AuthorityUtils.createAuthorityList("ROLE_ADMIN")); User user = new User("user", "{noop}user123", AuthorityUtils.createAuthorityList("ROLE_USER")); users.put(admin.getUsername(), admin); users.put(user.getUsername(), user); } @Override public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException { UserDetails user = users.get(username); if (user == null) { throw new UsernameNotFoundException("User not found: " + username); } return user; } } ``` 在上述示例中,我们创建了两个用户,一个是管理员,一个是普通用户。我们使用了NoOpPasswordEncoder来存储用户密码。在实际项目中,建议使用更安全的PasswordEncoder。 4. 配置登录和注销: 在Security配置类中,我们可以通过配置登录和注销URL,以及相关的身份验证和授权逻辑,来实现用户登录和注销功能。以下是一个简单的示例: ``` @Controller public class LoginController { @GetMapping("/login") public String login() { return "login"; } @GetMapping("/logout") public String logout(HttpServletRequest request, HttpServletResponse response) { Authentication auth = SecurityContextHolder.getContext().getAuthentication(); if (auth != null) { new SecurityContextLogoutHandler().logout(request, response, auth); } return "redirect:/login?logout"; } } ``` 在上述示例中,我们定义了/login和/logout两个URL,分别用于用户登录和注销。我们使用了Spring Security提供的SecurityContextHolder和SecurityContextLogoutHandler来实现注销功能。 5. 配置访问控制: 我们可以通过配置访问规则,以及使用注解或表达式来控制用户访问应用程序中的各个部分。以下是一个使用注解控制访问的示例: ``` @Controller @RequestMapping("/user") public class UserController { @PreAuthorize("hasRole('USER')") @GetMapping("/profile") public String profile() { return "profile"; } } ``` 在上述示例中,我们在UserController类中定义了/profile URL,并使用了@PreAuthorize注解来指定只有拥有USER角色的用户才能访问该URL。 这些示例代码可以帮助您在Spring Boot项目中使用Spring Security。请注意,这只是一个简单的概述,实际实现可能会更加复杂。建议您查看Spring Security官方文档,以获取更详细的信息和示例代码

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值