登录拦截安全卫士 vue

登录和拦截的整个流程说明

1 在登录成功以后，将 token 存储到 localStorage 中

2 在导航守卫中先判断当前访问的页面是不是登录页面

3 如果是登录页面，直接放行（next()）

4 如果不是登录页面，就从 localStorage 中获取 token，判断有没有登录

5 如果登录了，直接放行（next()）

6 如果没有登录，就跳转到登录页面让用户登录（next(’/login’)）

import Vue from 'vue'
import Router from 'vue-router'// 导入 Login 组件（注意，不要添加 .vue 后缀）
import Login from '@/components/login/Login'
// 导入首页组件
import Home from '@/components/home/Home'Vue.use(Router)const router = new Router({routes: [{ path: '/home', component: Home },{ path: '/login', component: Login }]
})// 全局导航守卫
// 所有的路由都会先走守卫
// 添加导航守卫之后，不管是访问哪个路由，都会执行beforeEach回调函数中的代码
// 因为所有的路由，都会经过该导航守卫，所以，就可以在这个导航守卫的回调函数中
// 判断有没有登录了
router.beforeEach((to, from, next) => {// console.log('导航守卫在看门', to)// ...if (to.path === '/login') {// 如果访问的是login页面，直接放行，也就是任何人不管有没有登录// 都可以访问登录页面// 直接调用 next() 方法，表示：访问的是哪个页面，就展示这个页面的内容next()} else {// 访问的不是登录页面// 判断用户是否登录成功，// 1 当用户登录成功，直接调用 next() 方法放行// 2 当用户没有登录，应该调用 next('/login') 跳转到登录页面，让用户登录// 通过登录成功时候保存的token，来作为有没有登录成功的条件const token = localStorage.getItem('token')if (token) {// 有，登录成功next()} else {// 没有，登录失败next('/login')}}
})export default router

接口调用的说明

注意：所有接口都需要传递 token，只有传递了正确的 token，服务器才会将数据返回给前端
如果没有传递token，服务器会返回 401 ，告诉接口调用者，没有权限来访问这个接口

登录拦截安全卫士 vue相关推荐

Vue + Spring Boot 项目实战（七）：前端路由与登录拦截器
文章目录前言一.前端路由二.使用 History 模式三.后端登录拦截器 3.1. LoginController 3.2. LoginInterceptor 3.3. WebConfigur ...
vue拦截器刷新登陆页面_Vue + Spring Boot 项目实战（六）：前端路由与登录拦截器-Go语言中文社区...
前言这一篇主要讲前端路由与登录拦截器的实现.放在一起讲是因为我在开发登录拦截器时因为这个路由的问题遇到了很多坑,花费了很长时间,网上的解决方案都不怎么靠谱,综合了好几种办法才最终成功,其实关于这个部 ...
Vue登录拦截登录后继续跳转指定页面
在开发中我们经常遇到这样的需求,需要用户登录后才可以访问该页面,如果用户没有登录点击该页面时则自动跳转到登录页面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 1.在路由器router下 ...
Vue + Spring Boot 项目实战（六）：前端路由与登录拦截器
本篇目录前言一.前端路由二.使用 History 模式三.后端登录拦截器 1.LoginController 2.LoginInterceptor 3.WebConfigurer 4.效果检验 ...
vue项目中实现登录拦截
一.路由拦截如果开发的是后台管理项目,希望必须登录才能访问其他页面的话,就用下面的这种方式进行拦截 import Vue from 'vue' import Router from 'vue-rou ...
【Vue+axios】登录拦截验证token，路由拦截器
GitHub项目地址:https://github.com/superman66/vue-axios-github/tree/master/src router文件夹中的index.js添加路由权限校 ...
简单实现vue中的登录拦截
本文主要讲述如何在vue中使用路由判断简单实现登陆的的拦截. 如何实现首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利 ...
vue路由登录拦截器_Vue路由器
vue路由登录拦截器介绍 (Introduction) In a JavaScript web application, a router is the part that syncs the cu ...
vue+axios 前端实现登录拦截（路由拦截、http拦截）
一.路由拦截登录拦截逻辑第一步:路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...

登录拦截安全卫士 vue

登录和拦截的整个流程说明

接口调用的说明

登录拦截安全卫士 vue相关推荐

最新文章

热门文章

登录拦截 安全卫士 vue

登录和拦截的整个流程说明

接口调用的说明

登录拦截 安全卫士 vue相关推荐

最新文章

热门文章

登录拦截安全卫士 vue

登录拦截安全卫士 vue相关推荐