项目实用-不登录就无法访问主页

在前后端分离模式的开发中，服务器如何知道来访者的身份呢？

在登录后，服务器会响应给用户一个令牌（token）
令牌中会包括该用户的id等唯一标识
浏览器收到令牌后，自己保存
下次请求其他接口时，（在请求头中）携带这个令牌去请求
这样服务器就知道来访者的身份了，服务器就会为该用户开发接口的访问权限，并处理该用户的数据

全局配置请求头

由于除了登录和注册接口外，其他所有接口都需要身份认证（都需要我们提供令牌），我们可以全局配置请求头

axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');

利用令牌控制页面的访问权限

比如，用户默认只能访问登录页，如果不登录就不能访问首页，怎么做？
首先，我们要判断本地存储是否有token

<!-- index.html -->
<!-- 本地存储有token，则说明用户登录了；没有token，则说明用户没有登录，不允许访问首页 -->
<script>
//没有token 返回的login页面if (localStorage.getItem('token') === null) location.href = './login.html'
</script>

第二，我们要判断token是否是假token或者是过期的token

在全局配置中，使用响应拦截器

如果token值是正确的，是没有过期的，则服务器响应 code===0
如果token是错误的或者是过期的，则服务器响应 code===1 && message==='身份认证失败'

axios.interceptors.response.use(function (response) {//在接收响应时做什么，响应码小于400执行if (response.data.code === 1) {toastr.warning(response.data.message)}return response;
},
function (error) {// 在请求错误时对要做的事，响应码大于400if (error.response) {if (error.response.data.message === '身份认证失败') {localStorage.removeItem('token');location.href = './login.html'}else {toastr.error(error.response.data.message);}}return Promise.reject(error);
});

项目实用-不登录就无法访问主页相关推荐

【高校宿舍管理系统】第四章创建前端项目以及完成登录页面
第四章创建前端项目以及完成登录页面提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第四章创建前端项目以及完成登录页面前言 ...
黑马点评项目-短信登录功能
一.导入黑马点评项目 1.代码下载视频资源链接:P25 实战篇-02.短信登录-导入黑马点评项目代码可以直接去黑马微信公众号上搜索,或者从下面的网盘链接中下载:链接: https://pan.ba ...
大项目之网上书城（五）——主页（End）
目录大项目之网上书城(五)--主页(End) 主要改动 1.主页(终于完成啦) 完整代码效果图 2.head.jsp的小改动代码 3.login.jsp ###代码效果图 4.login.js ...
开发期间模板引擎页面修改以后，要实时生效 || 登陆成功，防止表单重复提交，可以重定向||只有登录之后才能访问相关的页面
去除模板引擎的缓存 th:if 优先级高于 th:text 登陆成功,防止表单重复提交,可以重定向到主页只有登录之后才能访问相关的页面 login.html <!DOCTYPE html& ...
前端项目课程5 登录界面如何做
前端项目课程5 登录界面如何做一.总结一句话总结:找到好看的登录界面,然后模仿,再根据自己的需要加入自己的元素即可. 1.如何让块标签里面的行标签居中? 在块标签上面加 text-align:ce ...
教你发布Silverlight Bussiness Application(SQL Server 登录，局域网访问，以及使用ArcGIS Server服务需要注意的问题)...
教你发布Silverlight Bussiness Application(SQL Server 登录,局域网访问,以及使用ArcGIS Server服务需要注意的问题) 原文:教你发布Silverl ...
Vue 如何实现登录后，跳转到登录之前要访问的页面
Vue 如何实现登录后,跳转到登录之前要访问的页面一.需求有些时候,需要实现这样的功能: 项目中的有些页面是可以直接访问的,不需要登录. 但这个页面中的一些链接一些路径则需要登录后才能查看,也就是 ...
项目框架：登录跳转页面
项目框架:登录跳转页面运行结果: 代码整体布局: 代码如下: proj_hr_yzh7.sql :(数据表备份代码) pom.xml: web.xml: ForwardController : Em ...
Node项目部署正常启动后不能访问的问题
Node项目部署正常启动后不能访问的问题 Node项目部署之后,发现访问不了,pm2 list也是正常的,vue项目都可以正常访问,就是请求后台nodejs的时候就报404. 原以为是pm2的问题,先 ...

项目实用-不登录就无法访问主页

全局配置请求头

利用令牌控制页面的访问权限

项目实用-不登录就无法访问主页相关推荐

最新文章

热门文章