第一步: 路由 多添加一个自定义字段 requireAuth

 path: '/repository',
name: 'repository',
meta: {
requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
},
component: Repository

第二步:

router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (store.state.token) { // 通过vuex state获取当前的token是否存在
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
})
}
}
else {
next();
}

登录拦截到这里就结束了吗?并没有。

这种方式只是简单的前端路由控制,并不能真正阻止用户访问需要登录权限的路由。(可手动在浏览器地址栏输入没有权限的路由)

还有一种情况便是:当前token失效了,但是token依然保存在本地。

这时候你去访问需要登录权限的路由时,实际上应该让用户重新登录。

这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。

第三步:  拦截器 (要想统一处理所有http请求和响应,就得用上 axios 的拦截器。)

每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截

每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token,

当后端接口返回 401 Unauthorized(未授权) ,让用户重新登录。

关于Autorization   使用之后会忽略cookie的token,  削弱了安全性, 可以配合https

// http request 拦截器
axios.interceptors.request.use(
config => {
if (store.state.token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.Authorization = `token ${store.state.token}`;
}
return config;
},
err => {
return Promise.reject(err);
}); // http response 拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401: 401 旌旗 灵医 , 只用[授权] 旌旗的医生 才是 灵医
// 返回 401 清除token信息并跳转到登录页面
store.commit(types.LOGOUT);
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
return Promise.reject(error.response.data) // 返回接口返回的错误信息
});

完整的方法见 /src/http.js .

通过上面这几步,就可以在前端实现登录拦截了。

登出 功能也就很简单,只需要把当前token清除,再跳转到首页即可。

github

后台直接跳转方法:

这种方法只要没有登录 或者登录超时,

访问任何页面都会跳转到登录页面,

把不需要验证的页面也给拦截了

在index.html 加载一个 config.jsp

//加载
document.write("<script src='"+(T.cookie.get("path") || "/abc")+"/html5/config.do?sid=" + sid + "'></", "script>");

config.jsp

<c:when test="${isLogin}">
/*
配置文件
*/
var FileConfig = { ... }

</c:when>
<c:otherwise>
   window.location.href = '/html5/login.do';
</c:otherwise>

一个axios靠谱的封装

axios 拦截 , 页面跳转, token 验证的更多相关文章

  1. axios 拦截 , 页面跳转, token 验证(自己摸索了一天搞出来的)

    最近做项目,需要登录拦截,验证.于是使用了axios的拦截器(也是第一次使用,摸索了1天,终于搞出来了,真是太高兴啦!!!),废话不多说,直接上代码, 项目结构:vue-cli + webpack + ...

  2. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

  3. vue路由守卫+cookie实现页面跳转时验证用户是否登录----(二)设置路由守卫

    上一篇我们已经封装好了cookie方法,登录成功之后也可以吧用户信息存到cookie中,接下来需要在router/index.js中引入一下cookie.js文件 然后继续添加以下代码 /* * be ...

  4. 由前端登录验证,页面跳转,携带headers token引发的思考和尝试

    目录 1 前言 2 我的实现方式与存在的问题 3 我想到的解决方案 3.1 前端跳转时携带headers{'token': token} 不就行了(经验证不可行) 3.2 前端跳转封装请求,携带hea ...

  5. 通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转

    在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...

  6. JavaEE权限管理系统的搭建(六)--------使用拦截器实现菜单URL的跳转权限验证和页面的三级菜单权限按钮显示

    本小结讲解,点击菜单进行页面跳转,看下图,点击管理员列表后会被认证拦截器首先拦截,验证用户是否登录,如果登录就放行,紧接着会被权限验证拦截器再次拦截,拦截的时候,会根据URL地址上找到对应的方法,然后 ...

  7. vue拦截器实现统一token,并兼容IE9验证

    项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头 ...

  8. Springboot实现filter拦截token验证和跨域

    背景 web验证授权合法的一般分为下面几种 使用session作为验证合法用户访问的验证方式 使用自己实现的token 使用OCA标准 在使用API接口授权验证时,token是自定义的方式实现起来不需 ...

  9. Yii 1.1.17 五、分页类、关联模型、权限验证与默认页面跳转

    一.分页类使用 1.在控制器中 // 实例化 $criteria = new CDbCriteria(); $articleModel = Article::model(); // 分页 $total ...

随机推荐

  1. 用NotePad++如何实现大小写转换

    1.小写转换大写  Ctrl + Shift + U 2.大写转换小写  Ctrl + U

  2. pandas (loc、iloc、ix)的区别

    loc:通过行标签索引数据 iloc:通过行号索引行数据 ix:通过行标签或行号索引数据(基于loc和iloc的混合) 使用loc.iloc.ix索引第一行数据: loc: iloc: ix:

  3. 《剑指offer》第二十一题(调整数组顺序使奇数位于偶数前面)

    // 面试题21:调整数组顺序使奇数位于偶数前面 // 题目:输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有 // 奇数位于数组的前半部分,所有偶数位于数组的后半部分. #inclu ...

  4. Machine Learning 资料

    Awesome系列 Awesome Machine Learning Awesome Deep Learning Awesome TensorFlow Awesome TensorFlow Imple ...

  5. Codeforces 580A - Kefa and First Steps

    580A - Kefa and First Steps 思路:dp dp[i]表示包括前i个元素中a[i]在内的最大增序列. 代码: #include<bits/stdc++.h> usi ...

  6. windows批处理命令

    前言 批处理文件(batch file)包含一系列 DOS命令,通常用于自动执行重复性任务.用户只需双击批处理文件便可执行任务,而无需重复输入相同指令.编写批处理文件非常简单,但难点在于确保一切按顺序 ...

  7. xhr文件类型说明

    2017-08-08 18:31:08 xhr : XML HTTP Request,是一种在后台与服务器进行交互的数据.这意味着可以在不加载整个网页的情况下,对网页中的部分内容进行更新. 这是Aja ...

  8. PHP消息队列之Beanstalk

    Beanstalk,一个高性能.轻量级的分布式内存队列

  9. 安卓出现Invalid layout of java.lang.String at value

    Project->Properties->Run/Debug setting->选择类->classpath->删除Bootstrap Entries下面的文件 参考

  10. Weird journey CodeForces - 788B (路径计数)

    大意:$n$结点$m$条边无向图, 满足 $(1)$经过$m-2$条边$2$次 $(2)$经过其余$2$条边$1$次 的路径为好路径, 求所有好路径数 相当于边加倍后再删除两条边, 求欧拉路条数 首先 ...