登录功能实现

3.3 路由导航守卫控制访问权限

如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

// 为路由对象，添加 beforeEach 导航守卫
router.beforeEach((to,from,next) => {
    // 如果用户访问的登录页，直接放行
    if (to.path === '/login') return next()
    // 从 sessionStorage 中获得到 保存的 token 值
    const tokenStr = window.sessionStorage.getItem('token')
    // 没有token, 强制跳转到登录页
    if (!tokenStr) return next('/login')
    next ()
})

引用实例

// 挂在路由导航
router.beforeEach((to,from,next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数、表示放行
  //     next() 直接放行    next('/login')  强制跳转

  // 判断用户访问的是不是登录页
  if(to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})
export default router

3.4 推出

退出功能实现原理

基于 token 的方式实现退出比较简单，只需要销毁本地的 token 即可。后续的请求就不会携带 token, 必须重新登录生成一个新的 token 之后才可以访问页面。

// 清空token
window.sessionStorage.clear ()
// 跳转到登录页
this.$router.push('/login')