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

最新推荐文章于 2024-06-06 08:50:27 发布

weixin_30412013

最新推荐文章于 2024-06-06 08:50:27 发布

阅读量951

点赞数

文章标签：前端 javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/peatechen/p/11226595.html

版权

本文介绍了如何实现后台接口的访问限制，确保请求携带合法token，以及使用Vue路由守卫限制页面访问，详细讲解了添加请求头到axios以及element-ui上传组件的方法。

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


    后端根据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.r