vue

登录业务流程：

在登录页面输入用户名和密码调用后台接口进行验证通过验证以后，根据后天的相应状态跳转到项目主页

登录业务的相关技术点

http是无状态的通过cookie在客户端记录状态通过session在扶额u段记录状态通过token方式维持状态（前端与服务器之间存在跨域问题）

---

登录退出

axios.defaults.baseURL的三种配置方法

https://blog.csdn.net/weixin_41023528/article/details/89886735

GET和POST请求的区别（超详细）

https://blog.csdn.net/qq_43588129/article/details/115218995

记录Vue项目记录使用iview表单resetFields()方法遇到的问题

https://www.jianshu.com/p/777dbb2bef78

关于token: 观察Appication--Storage--Session Storage

        // 登录成功后:
        // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中 之后的网络请求中要拿这个token放入请求头中
        //   1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问 token就是登录令牌 
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中（不是localstorage）
        window.sessionStorage.setItem('token', res.data.token)
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home 但是如果没有拿到token而直接输入地址也不应该跳转 此时要用导航守卫 如果要跳转的是登录页面则直接放行 如果跳转的是其他页面则要判断是否携带token 导航守卫写在router.js里面
        this.$router.push('/home')

 问题1：用户未登录，直接通过URL访问特定页面，也可以访问，使得登录后保存得token没起到作用，这算是一个bug。

解决：如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。（方法：beforeEach路由导航守卫控制访问权限）

router.js

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

  if (to.path === '/login') return next()
  // 其他页面则要有token才能放行 之后的网络请求中要拿这个token放入请求头中
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login') /* 没有用else if */
  next()
})

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

 methods: {
    logout() {
      window.sessionStorage.clear() /* 清空token */
      this.$router.push('/login') /* 重定向到登录页 要用replace push还是能点返回回到这个home页 */
    },
}

---

 主页

问题3：除了登录接口，其他都是许哟啊授权得API，必须在请求头中使用Authorizaton字段提供token令牌。

解决：通过axios情趣拦截器添加token，保证拥有获取数据得权限。

// 请求拦截器 对请求进行预处理 为请求头加上token令牌 有令牌才能放行
axios.interceptors.request.use(config => {
  NProgress.start() /* 触发了request说明发起请求了 显示进度条 */
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})

可以发现，点击登录页面的“登录”按钮，查看Network--login--Headers---Authorizaton:null，登录之后然后再请求其他接口，Authorizaton:token的值。

---

一级菜单-用户管理 用户列表

p47用户列表-自定义状态列的显示效果

指定了作用域插槽，那么elp-table-column  prop=""便被覆盖了所以可以删掉

P54添加用户-自定义邮箱和手机号的校验规则

现在邮箱已经不需要自己验证了，{ required: true, message: '请输入正确的邮箱地址', trigger: ['blur' ,'change']

---

一级菜单-权限管理 角色列表

P84角色列表-完成删除角色下的指定权限的功能

问题4：发送删除的请求成功后，用this.getRolesList()重新刷新一下所有数据，会导致Table表格重新渲染一次 ，刚刚权限打开页面合上了，返回原来的表格状态。

解决： 原因是我们删除成功后，用this.getRolesList()重新获取了整个数据列表。方法：由于响应返回的data是当前角色下最新的权限数据，所以只给当前角色信息重新赋值权限。role.children = res.data

    // 根据Id删除对应的权限
    async removeRightById(role, rightId) {
      // d框提示用户是否要删除
      const confirmResult = await this.$confirm(
        '此 *** 作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('取消了删除！')
      }

      const { data: res } = await this.$http.delete(
        `roles/${role.id}/rights/${rightId}`
      )

      if (res.meta.status !== 200) {
        return this.$message.error('删除权限失败！')
      }
      //this.getRolesList(); 
      role.children = res.data /* 返回的数据就是角色所拥有的新权限 */
    },

  分配权限

P91分配权限-调用API完成分配权限的功能

一个小技巧：

// 点击确定后为角色分配权限
    async allotRights() {
      // 把所有全选和半选的id保存到数组中
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(), /* getCheckedKeys是tree组件自带的方法 ...是展开到数组中 */
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]

      const idStr = keys.join(',') /* 改为以逗号拼接的字符串 */

      const { data: res } = await this.$http.post( /* 请求都要接收 以便做请求失败与成功的提示 */
        `roles/${this.roleId}/rights`,
        { rids: idStr } /* 传递rids参数 */
      )

      if (res.meta.status !== 200) {
        return this.$message.error('分配权限失败！')
      }

      this.$message.success('分配权限成功！')
      
      this.getRolesList() /* 刷新 */
      this.setRightDialogVisible = false /* 隐藏 */
    }