后台接口访问限制，及前端路由访问限制（记录）

    后端根据token的正确性来限制接口访问，前端设置路由守卫来限制访问

    注意：token不要存在localStorage中，外部js可以读取本地存储，而不能读取cookie

1.如果访问请求中没有携带token数据，或者不正确的token，不正常的token，则返回错误，阻止接口访问。

• 1、向axios请求中添加 token

    
    import axios from "axios"
    import Vue from 'vue'
    import router from './src/router'
    const http = axios.create({
        baseURL:"http://localhost:8001"
    });
  
    // 给http添加一个请求头,将token加入请求头
    http.interceptors.request.use(function (config) {
        // Do something before request is sent
        config.headers.Authorization = localStorage.token  // 加入请求头
        return config;
      }, function (error) {
        // Do something with request error
        return Promise.reject(error);
      });
  
    // 给axios请求添加拦截器，根据服务器传回的状态做出操作 
    http.interceptors.response.use(res=>{
        return res
    }, err => {
        if(err.response.data.message){
            Vue.prototype.$message({        // 使用element-ui的消息组件，在窗口弹出错误信息
                type:'error',
                message: err.response.data.message
            })
        }
  
        // 非法访问，跳转至登录页
        if(err.response.status===401){
            router.push('/login')
        }
    })
    export default http;
  

• 2、验证请求是否含有token数据及其正确性

    // 访问限制中间件
    const LoginMiddleWare = async(req,res,next)=>{     // 添加中间件，查看是否有token数据
        if(req.headers.authorization==="undefined"){
            return res.status(401).send({
                message:"非法访问，请先登录！"
            })
        }
  
        const tokenData = Jwt.verify(req.headers.authorization,'dasdasfada')// 解析token的正确性 
        const { id } = tokenData
        if(!id){
            console.log("用户id不正确")
            return res.status(401).send({
                message:"非法访问，请先登录！"
            })
        }   // 还可以查是否真的有该用户，如果没有继续报错
        await next()
    }
  
  

2. vue路由守卫限制页面访问

• 1、在路由属性里添加 meta 属性

    path:'/login',
    name: 'login',
    component:Login,
    meta:{isPublic:true}

• 2、设置路由守卫

const router =  new Router({...})

router.beforeEach((to,from,next)=>{  // 切换到目标路由之前

    // 如果目标路由没有isPublic属性，跳转至登录页

  if(!to.meta.isPublic && !localStorage.token){    
    return next('/login')
  }
  next()
})
    

3. 给element-ui的上传组件添加请求头

• 添加header属性

 :headers="getToken()"