diff --git a/spug_web/src/layout/Notification.js b/spug_web/src/layout/Notification.js
index 28e28f8..a8f8951 100644
--- a/spug_web/src/layout/Notification.js
+++ b/spug_web/src/layout/Notification.js
@@ -41,6 +41,7 @@ export default function () {
   }
 
   function listen() {
+    if (!X_TOKEN) return;
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     ws = new WebSocket(`${protocol}//${window.location.host}/api/ws/notify/?x-token=${X_TOKEN}`);
     ws.onopen = () => ws.send('ok');
diff --git a/spug_web/src/layout/index.js b/spug_web/src/layout/index.js
index 5f9d5de..6d71c53 100644
--- a/spug_web/src/layout/index.js
+++ b/spug_web/src/layout/index.js
@@ -3,7 +3,7 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { Layout } from 'antd';
 import Sider from './Sider';
@@ -13,9 +13,8 @@ import routes from '../routes';
 import { updatePermissions, hasPermission } from 'libs';
 import styles from './layout.module.less';
 
-const Routes = [];
-
 function initRoutes(routes) {
+  const Routes = [];
   for (let route of routes) {
     if (route.component) {
       if (!route.auth || hasPermission(route.auth)) {
@@ -25,11 +24,9 @@ function initRoutes(routes) {
       initRoutes(route.child)
     }
   }
+  return Routes
 }
 
-updatePermissions()
-initRoutes(routes)
-
 // 404
 function NotFound() {
   return (
@@ -47,6 +44,12 @@ function NotFound() {
 
 export default function () {
   const [collapsed, setCollapsed] = useState(false)
+  const [Routes, setRoutes] = useState([]);
+
+  useEffect(() => {
+    updatePermissions();
+    setRoutes(initRoutes(routes));
+  }, [])
 
   return (
     <Layout>