‘adddxx

cjcode/src/main.js

@@ -14,6 +14,35 @@ import { Message   } from 'element-ui'
 Vue.prototype.$message = Message
 Vue.component(Message.name, Message)//解决默认弹出Message 提示框
 Vue.prototype.$store = store;//
+// Vue.prototype.$router = router;//
+
+
+
+
+router.beforeEach((to, from, next) => {
+	console.info("to",to);//即将要进入的目标 路由对象 to对象下面的属性
+	console.info("from",from);//当前导航正要离开的路由
+	//next 一定要调用该方法来 resolve 这个钩子。 调用方法：next(参数或者空) ***必须调用
+    if (to.path== "/" || to.path=="/Luckdraw" ||  to.path=="/Home" ||  to.path=="/About") {//如果即将要进去的页面是需要鉴权的
+		//&& from.path
+        //判断该路由是否需要登录权限
+		
+        if (localStorage.isauthorize=="1") {//已鉴权过了有记录 让用户进去
+            //通过封装好的cookies读取token，如果存在，name接下一步如果不存在，那跳转回登录页
+            next()//不要在next里面加"path:/",会陷入死循环
+        }else {//没有鉴权过 不能要去鉴权页面
+            next({
+                path: '/Authorize',
+                query: {redirect: "1"}//将跳转的路由path作为参数，登录成功后跳转到该路由
+            })
+        }
+    }
+    else {
+        next()
+    }
+})
+
+
 
 Vue.config.productionTip = false
 

cjcode/src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import Home from '../views/Home/Home.vue'
 import Luckdraw from '../views/Luckdraw/Luckdraw.vue'
 import About from "../views/About.vue";
+import Authorize from "../views/Authorize/Authorize.vue";
 
 Vue.use(VueRouter)
 
@@ -21,7 +22,14 @@ const routes = [
 	  path:"/About",
 	  name:"About",
 	  component:About,
+  },
+  {
+	  path:"/Authorize",
+	  name:"Authorize",
+	  component:Authorize,
   }
+  
+  
   // {
   //   path: '/about',
   //   name: 'About',

cjcode/src/views/Authorize/Authorize.vue

+<template>
+	<!-- 鉴权页面 -->
+	<div class="Authorize container-login100">
+		<div class="center">
+			<label>
+				<div class="padlock">
+					<svg id="lock" viewbox="0 0 64 64">
+						<circle stroke-width="2" fill="none" cx="32" cy="32" r="31" />
+						<path
+							d="M40.2,29v-4c0-4.5-3.7-8.2-8.2-8.2s-8.2,3.7-8.2,8.2v4H21v15h22V29H40.2z M27.2,25 c0-2.6,2.1-4.8,4.8-4.8s4.8,2.1,4.8,4.8v4h-9.5V25z" />
+					</svg>
+				</div>
+			</label>
+			<div class="input-icon">
+				<input class="password" v-model="password" placeholder="请输入访问密码" type="password" @keyup.enter="submitpwd">
+				<div class="arrow-icon">
+					<svg id="arrow" viewbox="0 0 48 44">
+						<polygon
+							points="27.7,13.3 26.3,14.7 31.6,20 14,20 14,22 31.6,22 26.3,27.3 27.7,28.7 35.4,21 " />
+					</svg>
+				</div>
+				<!-- <div class="error-message">Please try again.</div> -->
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				password:"",
+			}
+		},
+		methods:{
+			//密码输入事件
+			submitpwd(){
+				console.info("password",this.password);
+				if(this.password=="luma108@"){
+					this.$message({
+					  message: '身份认证成功!',
+					  type: 'success'
+					});
+					this.password = "";
+					
+					localStorage.isauthorize = "1";//认证
+					this.$router.push("/");
+					
+				}else{
+					localStorage.isauthorize = "0";//认证
+					this.$message.error("密码错误");
+					this.password = "";
+				}
+			},
+		}
+		
+	}
+</script>
+
+<style scoped="scoped">
+	.container-login100 {
+		
+		width: 100%;
+		min-height: 100vh;
+		align-items: center;
+		padding: 15px;
+		background-image: url("~@/assets/news/bg-01.jpg");
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: cover;
+	}
+
+	body {
+		margin: 0;
+		background: #f2f2f2;
+		text-align: center;
+		font-family: Arial, sans-serif;
+		font-weight: 100
+	}
+
+	svg {
+		width: 100%;
+		height: 100%;
+		
+		width: 64px;
+		height: 64px;
+	}
+
+	.center {
+		text-align: center;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		-ms-transform: translate(-50%, -50%);
+		-webkit-transform: translate(-50%, -50%);
+		transform: translate(-50%, -50%)
+	}
+
+	label {
+		position: relative;
+		margin: 0 auto 25px auto;
+		display: inline-block
+	}
+
+	.padlock {
+		position: relative;
+		width: 64px;
+		height: 64px;
+		opacity: 1;
+		-webkit-transition: .3s ease-in-out;
+		transition: .3s ease-in-out
+	}
+
+	.padlock.hide {
+		opacity: 0
+	}
+
+	.padlock svg circle {
+		stroke: #a2a2a2
+	}
+
+	.padlock svg path {
+		fill: #a2a2a2
+	}
+
+	.padlock.unlock svg circle {
+		stroke: #1fd34a
+	}
+
+	.padlock.unlock svg path {
+		fill: #1fd34a
+	}
+
+	.input-icon {
+		position: relative;
+		-webkit-transition: .3s ease-in-out;
+		transition: .3s ease-in-out
+	}
+
+	.arrow-icon {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 50px;
+		height: 100%;
+		background: #fff;
+		display: none;
+		z-index: -2
+	}
+
+	.arrow-icon.show {
+		display: block;
+		z-index: 2
+	}
+
+	.arrow-icon svg {
+		fill: #d8d8d8
+	}
+
+	.arrow-icon:hover svg {
+		fill: #444
+	}
+
+	.password {
+		position: relative;
+		width: 220px;
+		height: 45px;
+		letter-spacing: 0.05em;
+		line-height: 1em;
+		margin: 0;
+		padding: 2px 70px 2px 15px;
+		outline: none;
+		border: none;
+		border-radius: 1px;
+		font-size: 14px;
+		-webkit-transition: box-shadow 0.25s ease;
+		transition: box-shadow 0.25s ease;
+		-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
+	}
+
+	.input-icon.unlock {
+		opacity: 0
+	}
+
+	.error-message {
+		width: 275px;
+		text-align: left;
+		font-size: 14px;
+		line-height: 1em;
+		background-color: #f0523d;
+		color: #fff;
+		position: absolute;
+		padding: 15px;
+		opacity: 0;
+		z-index: -1
+	}
+
+	.error-message.show {
+		opacity: 1
+	}
+</style>