后台接口訪問限制，及前端路由訪問限制（記錄）

    后端根據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()"