vue3中权限验证

最新推荐文章于 2024-08-24 18:03:25 发布

鲤忆

最新推荐文章于 2024-08-24 18:03:25 发布

阅读量697

点赞数

分类专栏： vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_62487693/article/details/129429350

版权

本文详细介绍了在Vue3中进行前端权限验证的方法，包括接口权限的实现（使用token技术）、页面访问权限的控制以及基于身份的权限验证。同时，文章讨论了服务器端和前端在token管理上的考虑，并给出了面试题中Vue如何实现权限验证的解决方案，涉及路由导航守卫、meta元素和axios拦截器的应用。

摘要由CSDN通过智能技术生成

1.简单接口权限验证（request.js）

//接口权限
import axios from 'axios'
import { getToken } from "./auth.js";
// hooks函数只能在函数组件或者setup中使用.其他地方不能用
// import { useRouter } from 'vue-router';
// let $router = useRouter();
import router from '../router'


const instance = axios.create({
    baseURL:'http://192.168.218.141:3000/',
    timeout:5000
})

instance.interceptors.request.use((config)=>{
    // ....大多数请求公共业务这里写
    let token = getToken()
    config.headers['token'] = token; // 关键看服务端具体怎么要求的
    return config
})

const controller = new AbortController();
instance.interceptors.response.use(ctx=>{
    // ...大多数响应公共业务这里写
    // 1:拦截无效和过期token...
    //  5001 无效token  50002 过期token
    console.log(ctx.data);
    if(ctx.data.code==5001||ctx.data.code==5002){
        alert('token失效了')
        // 跳转到登录页面
        // console.log($router);
        // ??????