vue项目在pc端实现页面水印效果

需求：
  PC端和小程序页面需要水印，水印内容是用户名+电话后四位。

思路：

1. 水印通过变量进行赋值，登录成功后，将用户名及手机号后四位拼接。
2. 均匀平铺在页面上，通过文章发现有三种方案，分别是：div/css、canvas、svg。
3. 还有明水印、暗水印的区分及破解。

问题：

1. 除了登录页，其余页面都要展示水印。
2. 点击系统右上角的退出按钮，退出到登录页后，登录页存在水印。
3. token失效后，跳转登录页，登录页存在水印。
4. 登录成功到首页后，点击菜单切换后，点击退出按钮，登录页存在水印。
5. 如果想实现某个页面不显示水印、某个抽屉显示水印，这种效果。

解决方案：

1. 登录成功后才会走layout，所有的页面都是在layout的基础上渲染的，把水印相关的方法写在这里就不会一刷新水印就消失了。
2. 点击退出按钮，退出到登录页的时候，移除dom节点。由于退出按钮在navBar组件里，每一个页面也都有navBar，直接将生成水印的方法写在navBar组件里。在登录成功渲染navBar的时候，创建dom节点承载水印内容this.waterWrapper = document.createElement('div')，在点击退出的时候给退出按钮绑定事件，移除创建的dom节点document.body.removeChild(this.waterWrapper)。
3. 一种方法是把创建的div保存在vuex中，token失效的时候remove；另一种方法是给创建的div一个唯一id，通过document.getElementById('watermark')获取，并removeChild移除该div。
4. 该项目有一个全屏展示，登录成功的home页没有左侧的二级菜单，是个全屏展示的图表页面。通过打开设置发现，当点击退出到登录页的时候该div节点依然存在，退出及token失效都已做了清除操作，为什么还会出现节点未清除的情况？
   通过尝试发现：如果一登录到首页就点击退出，此时登录页没有水印；如果点击菜单跳转了别的路由页面，此时去点退出，登录页是有水印的。
   判断：登录成功进入到navBar页面生成水印，首页是单独的一个全屏页面，在首页和头部一级菜单切换的时候，每次都会重新创建navBar，所以切换了路由再退出，就相当于又创建了一次水印节点，那么其实是因为创建了多次，只移除了一次，导致登录页存在水印。
   所以每次创建之前先看看之前是否有创建过，有的话就删掉。
5. 比较麻烦，就不能写在全局的载体上了，需要把生成水印的相关方法封装成公用的方法，把移除方法也封装起来；需要显示水印的载体不同的话，还要把body改了，比如在一个抽屉显示水印的话就得加在抽屉的最外层的div上。

代码：

Navbar

<script>
	export default {
   
		mounted () {
   
		    var watermark1 = document.getElementById('watermark')
		    // 在创建新的水印节点之前，先判断有没有，有的话删掉
		    if (watermark1) document.body.removeChild(watermark1)
		    const waterWrapper = document.createElement('div')
		    waterWrapper.id = 'watermark'
		    this.cssHelper(waterWrapper, {
   
		      position: 'fixed',
		      top: '0px',
		      right: '0px ',
		      bottom: