登录和拦截的整个流程说明
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
,告诉接口调用者,没有权限来访问这个接口