登录模块（二）-保存用户信息 和 访问权限控制

05-登录补充-保存用户信息

封装了模块操作存储：store/index.js

// 提供存储信息的函数  提供获取用户信息的函数  提供删除用户信息的安函数
const KEY = 'hm-toutiao-79-user'
export default {
  setUser (user) {
    // 把user对象存储到sessionStorage
    const jsonStr = JSON.stringify(user)
    window.sessionStorage.setItem(KEY, jsonStr)
  },
  getUser () {
    // 把sessionStorage获取出来，转换对象。
    const jsonStr = window.sessionStorage.getItem(KEY) || '{}'
    // null.abc 报错  {}.abc undefined
    return JSON.parse(jsonStr)
  },
  delUser () {
    // 删除 KEY 对应的数据
    window.sessionStorage.removeItem(KEY)
  }
}

在登录逻辑使用：views/login/index.vue

+ import store from '@/store'
.then(res => {
              // 成功 res 对象响应对象 res.data 主体
              // 保存  用户信息（token） 获取响应主体下data对象
              store.setUser(res.data.data)
+              this.$router.push('/')
            })

06-登录补充-访问权限控制

• 根据客户端上存储了用户信息来判断是否登录过。
• 访问权限控制
  • 除登录页面外，所有的路由的跳转，都需要做访问权限的控制。
  • 所有的路由跳转前，判断是否存在用户信息。

// 前置导航守卫
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // to 去那
  // from 来自
  // next 下一步  next() 放行  next('/login') path 跳转路径
})

实现代码：router/index.js

// 前置守卫
router.beforeEach((to, from, next) => {
  const user = store.getUser()
  // 访问的是登录页面：放行
  // 访问的是其他页面且没有做过登录：拦截  登录页面。
  // if (to.path === '/login') return next()
  // if (!user.token) return next('/login')
  // next()
  if (to.path !== '/login' && !user.token) return next('/login')
  next()
})