登录拦截 安全卫士 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 ，告诉接口调用者，没有权限来访问这个接口