vue 实现axios拦截、页面跳转和token 验证
2018-07-17 14:15
906 查看
第一步: 路由 多添加一个自定义字段 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清除,再跳转到首页即可。
后台直接跳转方法:
这种方法只要没有登录 或者登录超时,
访问任何页面都会跳转到登录页面,
把不需要验证的页面也给拦截了
在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 验证(经常用于判断用户是否登录)
- axios 拦截 , 页面跳转, token 验证
- 在Vue中使用axios请求拦截的实现方法
- Servlet课程0425(六) 不经过验证直接跳转---session实现不同页面之间共享数据
- vue开发:vue+axios实现登录拦截
- 利用java filter 实现业务异常拦截 跳转到错误信息提示页面
- vue中页面跳转拦截器的实现方法
- vue+axios 前端实现的常用拦截
- Vue+axios 实现http拦截及路由拦截
- vue+vuex+axios实现登录、注册页权限拦截
- Vue.js实战之利用vue-router实现跳转页面
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- vue+axios 前端实现登录拦截(路由拦截、http拦截)
- Spring Security4.1.3实现拦截登录后向登录页面跳转方式(redirect或forward)返回被拦截界面
- vue+axios 前端实现登录拦截(路由拦截、http拦截)
- Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)
- vue.js+elementUI学习01之后台管理登录验证实现axios和springMVC交互
- Vue+axios 实现http拦截及路由拦截实例
- vue实现登录后页面跳转到之前页面